4

少し質問があります

スマイリーをクリックして、テキストをテキストエリアに挿入したいと思います。後でスマイリーを追加したい場合は、テキストエリアの最後ではなく、カーソル位置にスマイリーを追加する必要があります。

これは私のhtmlコードです:

<textarea id="description" name="description"></textarea>

<div id="emoticons">
    <a href="#" title=":)"><img alt=":)" border="0" src="/images/emoticon-happy.png" /></a>
    <a href="#" title=":("><img alt=":(" border="0" src="/images/emoticon-unhappy.png" /></a>
    <a href="#" title=":o"><img alt=":o" border="0" src="/images/emoticon-surprised.png" /></a>
</div>

これは私のJSコードです:

$('#emoticons a').click(function(){

    var smiley = $(this).attr('title');
    $('#description').val($('#description').val()+" "+smiley+" ");

});

ここで結果を確認できます (NO WRAP - BODY) http://jsfiddle.net/JVDES/8/

javascript コードに extern JS ファイルを使用しています...
コードが NO WRAP - HEAD モードで実行されない理由を知っていますか? http://jsfiddle.net/JVDES/9/

助けてくれてありがとう

よろしくベルンテ

4

4 に答える 4

7

また、この関数を使用することもできます:

function ins2pos(str, id) {
   var TextArea = document.getElementById(id);
   var val = TextArea.value;
   var before = val.substring(0, TextArea.selectionStart);
   var after = val.substring(TextArea.selectionEnd, val.length);
   TextArea.value = before + str + after;
}

あなたの例については、こちらをご覧ください。


更新 1:

指定した位置にカーソルを設定するには、次の関数を使用します。

function setCursor(elem, pos) {
   if (elem.setSelectionRange) {
      elem.focus();
      elem.setSelectionRange(pos, pos);
   } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
   }
}

jsFiddle のコードを更新したので、新しい例を表示するには、こちらを参照してください。

于 2012-06-17T11:27:07.407 に答える
3

これを試してください - http://jsfiddle.net/JVDES/12/

キャレット位置機能のクレジットはhttps://stackoverflow.com/a/1891567/981134に移動します

于 2012-06-17T11:20:55.690 に答える
3

no wrap (head)との違いno wrap (body)は、前者はできるだけ早くコードを実行し、後者はページの読み込み後にコードを実行することです。

この場合、 を使用するとno wrap (head)、「#emoticons a」が存在する前にコードが実行されます。したがって、$('#emoticons a') は none を返し、クリック ハンドラーをアタッチしません。後で、リンクが作成されます。

したがって、解決策は、ページが読み込まれたときにコードを実行するように指示することです。

これを行うには、いくつかの同等の方法があります。http://api.jquery.com/ready/

  1. $(document).ready(handler)

  2. $().ready(handler)(これはお勧めしません)

  3. $(handler)

したがって、バージョン 3 を使用すると、次のようになります。

$(function() {
    $('#emoticons a').click(function(){

    var smiley = $(this).attr('title');
    $('#description').val($('#description').val()+" "+smiley+" ");

    });
});

http://jsfiddle.net/Nc67C/

于 2012-06-17T11:23:18.827 に答える
2

これも試してみてください...

$('#emoticons a').click(function() {

    var smiley = $(this).attr('title');

    var cursorIndex = $('#description').attr("selectionStart");
    var lStr =  $('#description').val().substr(0,cursorIndex);
    var rStr = $('#description').val().substr(cursorIndex);

    $('#description').val(lStr+" "+smiley+" "+rStr);

});

あなたのコメントの後に修正してください：

</p> 

$('#emoticons a').click(
function(){var smiley = $(this).attr('title');

var cursorIndex = $('#description').attr("selectionStart");
var lStr =  $('#description').val().substr(0,cursorIndex) + " " + smiley + " ";
var rStr = $('#description').val().substr(cursorIndex);

$('#description').val(lStr+rStr);
$('#description').attr("selectionStart",lStr.length);                                     
});​

</p>

于 2012-06-17T11:26:35.130 に答える