单个文本区域中的按钮值

Button values in single textarea

本文关键字：按钮 文本 区域 单个      更新时间：2023-09-26

在我的代码中

<script>
$(document).ready(function(){
    $("#btn").on('click', function() {
        var caretPos = document.getElementById("txt").selectionStart;
        var textAreaTxt = $("#txt").val();
        var txtToAdd = $("#btn").val();
        $("#txt").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    })
});
</script>

HTML

<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
<input type="button" id="btn" value="Bye" />
<input type="button" id="btn" value="TC" />

我想在文本区域中给出这些值。但它只是给出了Ok按钮的值。如何在文本区域中为每个按钮提供值

元素上有相同的id。ID必须是唯一的。您可以使用class并结束此：

$(".btn").on('click', function() {
  $("#txt").val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt" rows="5" cols="10"></textarea>
<input type="button" class="btn" value="OK" />
<input type="button" class="btn" value="Bye" />
<input type="button" class="btn" value="TC" />

试试这个html

<textarea id="txt" rows="15" cols="70"></textarea>
<input type="button" id="btn" value="OK" />
   <input type="button" id="btn" value="Bye" />
   <input type="button" id="btn" value="TC" />

javascript

 $('input#btn').click(function() 
    { 
       $('#txt').val($('#txt').val()+this.value); // append the value of each button
    })

此处演示

<textarea name="insert" rows="5" cols="30" id="insert" onblur="myFunction()"></textarea>
<button class="myvalue" id="myvalue">Ok</button>
    <button class="myvalue" id="myvalue">Bye</button>
    <button class="myvalue" id="myvalue">Tc</button>
<script>
function insertAt (myField, myValue, startSel, endSel)
 {
if (startSel || startSel == '0') {
    var startPos = startSel;
    var endPos = endSel;
    myField.val(myField.val().substring(0, startPos)+ myValue+ myField.val().substring(endPos, myField.val().length));
  }`  else {
  myField.val() += myValue;
  }`}var targetBox = $('textarea#insert'),
startSel, 
endSel;`targetBox.bind('focusout', function() {
startSel = this.selectionStart;
endSel = this.selectionEnd;
});
$(".myvalue").click(function() {
    var myValue = $(this).text();
    insertAt(targetBox, myValue, startSel, endSel);
});    
</script>

最后它工作

所有按钮都有相同的"id"，"OK"是第一个，所以这就是返回的那个。。。

要获得单击的按钮的值，您需要为每个按钮提供一个唯一的id（无论如何都应该是这样）。

我会把你的按钮放在一个单独的容器中，可能是一个div，然后应用点击处理程序。在处理程序函数中，查看事件目标是否有value属性，如果有，则将其发送到文本框。

或者你可以给每个按钮一个处理程序，这取决于你的情况。。。

Danny

我建议您将按钮id更改为class，因为id对每个元素都是唯一的，所以您必须使用class而不是id。

$("input.btn").on('click', function() {
    $("#txt").val($("#txt").val()+$(this).val());
})

演示

相关文章：