2

多数の入力/テキストエリアを含むフォームがあります。フォームを使用する管理者は、動的な値をテキストに追加できます。フォームの下部に、使用可能なすべての動的値のリストがあります。

Q: 私がしようとしているのは、リスト内の値をクリックすると、フォーカスされた前の入力が検出され、値が挿入されることです。

もっと簡単に言えば、この jsFiddleをこの input=text に対して textarea と同じように機能させるにはどうすればよいでしょうか? したがって、入力フィールドにカーソルがある場合、テキストエリアの代わりにそこに foo 値が追加されます。

HTML

<form action="" method="post">     
    <label for="name">Name:</label> 
    <input name="name" type="text" />

    <label for="message">Message:</label> 
   <textarea name="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </textarea>

    <input value="Submit" type="submit" />          
</form>

<h3>Insert short code</h3>
<ul class="inserts">
    <li><a href="#" data-foo="{foo_1}">Foo 1</a></li>
    <li><a href="#" data-foo="{foo_2}">Foo 2</a></li>
    <li><a href="#" data-foo="{foo_3}">Foo 3</a></li>
    <li><a href="#" data-foo="{foo_4}">Foo 4</a></li>
    <li><a href="#" data-foo="{foo_5}">Foo 5</a></li>
</ul>

JS

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();
            }
        });
    }
});

$(".inserts a").click(function (e) {
    e.preventDefault();
    $('textarea').insertAtCaret(
        $(this).data("foo")
    );
});
4

1 に答える 1

1

簡単な方法は、入力フィールド内のカーソルの最後の位置を変数に格納することです。1 つのボタンをクリックすると、目的の位置に値を簡単に挿入できます。考えるのに十分ですか？;)

編集: 位置 x に文字列を挿入するには、このjQuery キャレット プラグインを使用するか、位置 x で元の入力コンテンツを分割し、その間に新しいコンテンツを追加します。

たぶん、あなたもこのスレッドを見たいと思うでしょう。

私の解決策は次のとおりです。

var pos = 0;

$('yourField').on('click keypress', function () {
    pos = $(this).caret().start
});

// inside your click function you can use the following
// $.fn.caretTo( index , [ offset ] )
// to add input to a specific position
于 2013-07-12T11:04:09.857 に答える