Jquery将事件绑定到页面上的多个Textarea实例

I have a script working exactly the way I need, just now, I am not able to replicate it on a page - The jquery takes textarea boxes and edits them based on buttons being pressed, however I need each textarea box to have it's own set of buttons. Here is my code:

我有一个脚本完全按照我需要的方式工作,刚才,我无法在页面上复制它 - jquery采用textarea框并根据按下的按钮编辑它们,但是我需要每个textarea框来拥有它自己的集合按钮。这是我的代码:

HTML CODE:

 <textarea style="width:500px; height: 150px;" id="text">This is some text</textarea>
<br />
<input type="button" value="Click Me" id="button" />
<input type="button" value="Click Me 2" id="button2" />

<br /><br />

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea>
<br />
<input type="button" value="Click Me" id="button" />
<input type="button" value="Click Me 2" id="button2" />

JAVASCRIPT:

function insertText(text) {
    var $textbox = $("#text");
    var textStr  = $textbox.text();
    var startPos = $textbox[0].selectionStart;
    var endPos   = $textbox[0].selectionEnd;

    // If set to true, the selection will NOT be replaced.
    // Instead, the text will be inserted before the first highlighted character.
    if (false)
    {
        endPost = startPos;
    }

    var beforeStr = textStr.substr(0, startPos);
    var afterStr  = textStr.substr(endPos, textStr.length);

    textStr = beforeStr + text + afterStr;
    $textbox.text(textStr);
    return textStr;
}

$(function () {
    $('#button').on('click', function () {
        insertText("\n\nafter clicking");    
    });
    $('#button2').on('click', function () {
        insertText("\n\nafter clicking 2");    
    });
});

JS Fiddle: https://jsfiddle.net/0hmdu0ox/

JS小提琴:https://jsfiddle.net/0hmdu0ox/

1 个解决方案

#1

You can try this version :

你可以试试这个版本:

<textarea style="width:500px; height: 150px;" id="txt1">This is some text</textarea>
<br />
<input type="button" value="Click Me" onclick="insertText('\n message1', 'txt1');" />
<input type="button" value="Click Me 2" onclick="insertText('\n message2', 'txt1');" />

<br /><br />

<textarea style="width:500px; height: 150px;" id="txt2"> This is some text</textarea>
<br />
<input type="button" value="Click Me"  onclick="insertText('\n message1', 'txt2');" />
<input type="button" value="Click Me 2" onclick="insertText('\n message2', 'txt2');" />

use only this function:

仅使用此功能:

function insertText(mess, txtA) {
    var textbox = $('#'+txtA);

    var textStr  = textbox.text();
    var startPos = textbox[0].selectionStart;
    var endPos   = textbox[0].selectionEnd;

    if (false) {
        endPost = startPos;
    }

    var beforeStr = textStr.substr(0, startPos);
    var afterStr  = textStr.substr(endPos, textStr.length);

    textStr = beforeStr + mess + afterStr;
    textbox.text(textStr);
    return textStr;
}

Targets for optimizations:

优化目标:

if you can get the nearest textarea in the insertText function that will be great... then you don't need id for textarea and also you don't need to specify the id in the parameters, you will then be able to do something like this:

如果你能在insertText函数中获得最接近的textarea,那将是很好的...那么你不需要textarea的id,你也不需要在参数中指定id,你就可以做一些事情了像这样:

<textarea style="width:500px; height: 150px;"> This is some text</textarea>
<br />
<input type="button" value="Click Me"  onclick="insertText('\n message1', this);" />
<input type="button" value="Click Me 2" onclick="insertText('\n message2', this);" />

And in function something like this:

功能如下:

function insertText(mess, btn) {
    var textbox = $(btn).prev('textarea');
    ....

Hope it will help you to find the best solution :)

希望它能帮助您找到最佳解决方案:)

#1