0

タグボタンのある入力フィールドを取得しました。これらのボタンのいずれかをクリックすると、値が入力フィールドに入ります。

ここに私のコードがあります:

<input id="demooutput" type="text" size="15" value="My Text" name="demo" />
<span class="demooutput">
    <a href="#" class="button orange"> A</a>
    <a href="#" class="button orange"> B</a>
    <a href="#" class="button orange"> C</a>
    <a href="#" class="button orange"> D</a>
    <a href="#" class="button orange"> E</a>        
</span>

$('.demooutput a').click(function(){
    $('#demooutput').val($('#demooutput').val() + ' ' + $(this).html());
    return false;
});

マウスカーソルがある場所に値を追加する (短い) 方法 (jQuery を使用) はありますか?

例: 私の入力の値は My Text です。My と Text の間にカーソルを置いてタグ ボタンをクリックすると、値が Text の and に移動します。カーソルがどこにあるかを正確に知りたいです。

JSFIDDLEでデモを見る

4

4 に答える 4

1

私は今、このコードでそれを行います:

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
}
});


$('.demooutput a').click(function(){
    var txtToAdd = ' ' + $(this).html() + ' ';
    $('#demooutput').insertAtCaret(txtToAdd);
    return false;
});



<input id="demooutput" type="text" size="15" value="My Text" name="demo" />
<span class="demooutput">
    <a href="#" class="button orange">A</a>
    <a href="#" class="button orange">B</a>
    <a href="#" class="button orange">C</a>
    <a href="#" class="button orange">D</a>
    <a href="#" class="button orange">E</a>        
</span>


デモ を見る


それは私が持っているすべてのブラウザで完璧に動作します:

  1. Firefox 2.0
  2. Firefox 16
  3. Firefox 18
  4. Firefox 22
  5. インターネット エクスプローラー 8
  6. インターネット エクスプローラー 10
  7. クロム 23
于 2013-07-29T17:52:12.013 に答える
0

私は最近数時間前にあなたに答えました。今、このコード フィドルを試してください

    $('.demooutput a').click(function(){
        $('#demooutput').html($('#demooutput').html() + ' <span class="tag">' + $(this).html() +"</span>");
        return false;
    });

            $('body').on({
                mouseenter:function()
            {
                  $('#delete').fadeIn();
                $('#delete').css('left',$(this).position().left + $(this).width() + $('#delete').width() + 'px');
                $('#delete').css('top',$(this).position().top - 5 + 'px')
            }
            ,mouseleave:function()
            {

            }},'.tag')

;

助けたい場合は、私にコメントしてください。

于 2013-07-28T18:22:49.780 に答える
0

JSコードをこれに置き換えるだけです

 $('.demooutput a').click(function(){
   var caretPos = document.getElementById("demooutput").selectionStart;
   var textAreaTxt = jQuery("#demooutput").val();
   var txtToAdd = $(this).html();
   jQuery("#demooutput").val(textAreaTxt.substring(0, caretPos) + txtToAdd +    textAreaTxt.substring(caretPos) );
    return false;
});
于 2013-07-28T18:01:10.017 に答える