Question

如何创建一个按钮，当单击它时，它模拟ENTER就像在键盘上物理按下一样。

换句话说，单击此按钮会模拟正在写入文本的文本区域内的ENTER按钮。

例如，点击按钮后，

原始文字区域文字：

XXX XXX XXX

变为

新文字区域文字：

XXX XXX XXX

新行

所有这些都是通过点击按钮进行模拟的。

假设文本区域的ID为#QR

严格javascript，没有jquery

Answer 1

虽然很容易。您所要做的就是在按钮上添加一个事件监听器，如下所示：

HTML代码：

<textarea id="text_area"></textarea>
<button type="button" id="new_line">Click Me!</button>

JS代码

var textarea = document.getElementById("text_area"),
    myBtn    = document.getElementById("new_line");

myBtn.addEventListener("click", function(){
    textarea.value += "\r\n";
    textarea.focus(); // This is optional, if you want the user to go back into the textarea. This will be good then :)

}, false);

请注意，我已经在函数之外声明了变量，这样在每次单击按钮时，您都不必跳转到DOM来查找textarea over＆amp;再一次。

希望有所帮助： - ）

Answer 2

HTML

<script>
function clickOn() 
{
 document.getElementById("txtArea").value = document.getElementById("txtArea").value + "\n*";
}
</script>

JS

var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'nov', 'Dec'];

$(function() {
   $("#datepicker1").datepicker({
     dateFormat: "yy-mm-dd",
     onSelect: function(dateText) {
       var dateObj = $(this).datepicker('getDate');

       $('#month').html(months[dateObj.getMonth()]);
       $('#day-name').html(days[dateObj.getDay()]);

       var dayNo = dateObj.getDate();

       if (dayNo.length == 1)
         $('#day-number').html('0' + dayNo);
       else
         $('#day-number').html(dayNo);
     }
   }).datepicker("setDate", "0");

   //div click event
   $('#date').on("click", function() {
     $('#datepicker1').datepicker('show');
   });
 });

使用javascript，按钮点击触发器在textarea

2 个答案: