Jquery Binding Events zu mehreren Textarea Instanzen auf einer Seite

Question

Ich habe ein Skript genau so, wie ich brauche, gerade jetzt, ich bin nicht in der Lage, es auf einer Seite zu replizieren - Die jquery nimmt TextArea-Boxen und bearbeitet sie basierend auf Schaltflächen sein gedrückt, aber ich brauche jede TextArea-Box, um ihre eigenen Tasten zu haben. Hier ist mein Code:

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/

Answer 1

Sie diese Version ausprobieren können:

<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');" /> 

Verwendung nur diese Funktion:

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

Ziele für Optimierungen:

wenn Sie das nächste Textfeld in der insert Funktion erhalten, die groß sein ... dann brauchst du keine ID für Textarea und du musst auch nicht die ID im Par angeben Messern, werden Sie dann in der Lage sein, so etwas zu tun:

<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);" /> 

Und in Funktion etwas wie folgt aus:

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

Hoffe, es wird Ihnen helfen, die beste Lösung zu finden :)