Question

我想要使用Javascript 或jQuery

从用户点击的按钮写入textarea

像这样：

<html>
    <head></head>
    <body>

    <button>Q</button>
    <button>W</button>
    <button>E</button>
    <button>R</button>
    <button>T</button>
    <button>Y</button>

    <br/><br/>  

    <textarea></textarea>

    </body>
</html>

因此，用户可以在此处单击其中一个“QWERTY”按钮，它将粘贴到下面的框中。有一个相对简单的方法来做到这一点？我在网上查了一些例子，但是对于像我这样的新手来说，他们都过分了。

如果我们可以将文字写入不在textarea

上的button字符，那也会很棒

我似乎无法让这个工作

    <html>
        <head>

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script>$('button').click(function(){        
    $('textarea').text($('textarea').text() + $(this).text());
    //$('input:text').val($('textarea').text() );
    $('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});

</script>

</head>
<body>

<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>  
<input type='text'/>
<br/><br/>  
<textarea></textarea>

</body>
</html>

Answer 1

如果您想要追加到textarea的末尾，请使用

$('button').on('click', function(){
    var letter = $(this).text();

    $('textarea')[0].value += letter;
});

完整演示

$(function() {

  $('button').on('click', function() {
    var letter = $(this).text();

    $('textarea')[0].value += letter;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Q</button>
<button>W</button>
<button>E</button>
<button>R</button>
<button>T</button>
<button>Y</button>

<br/>
<br/>

<textarea></textarea>

Answer 2

JS

$('button').click(function(){        
    $('textarea').text($('textarea').text() + $(this).text());
    //$('input:text').val($('textarea').text() );
    $('input:text').val($('input:text').val() + ' ' + $(this).data('stuff'));
});

HTML

<button data-stuff='stuff_Q'>Q</button>
<button data-stuff='stuff_W'>W</button>
<button data-stuff='stuff_E'>E</button>
<button data-stuff='stuff_R'>R</button>
<button data-stuff='stuff_T'>T</button>
<button data-stuff='stuff_Y'>Y</button>
<br/><br/>  
<input type='text'/>
<br/><br/>  
<textarea></textarea>

在单击所有按钮后，每个OP更新需要额外的附加值。

每个OP再次更新，询问“在文本框中写入与按钮标签不同的字母”。我想使用data（）为每个按钮存储一些数据来获取它。

FIDDLE

Answer 3

这个怎么样：

$('button').click(function(){
     $('textarea').text( $(this).text() );
});

jsFiddle Demo

如果你想进一步采用这个例子，我们可以将字母附加到textarea，而不是覆盖之前的内容：

var ta = $('textarea'); //cache selector for re-use (see note at bottom)
$('button').click(function(){
    ta.text( ta.text() + $(this).text() );
});

现在，让我们添加一个按钮来删除textarea。在这里，我们为一个特定按钮分配一个ID并检查它：

var ta = $('textarea');
$('button').click(function(){
    if (this.id == "eraseit"){
        ta.text('');
    }else{
        ta.text( ta.text() + $(this).text() );
    }
});

jsFiddle Demo #2

注意：

在第2和第3个示例中，我们cached选择器（将引用保存到变量中）以获得速度。

每次命中代码$('textarea')时，都会搜索DOM以查找该选择器。缓存选择器会消除除初始搜索之外的所有选择。在这个简单的例子中并不重要，但对大型项目非常有用。

ID和类非常重要。它们通过css和javascript / jQuery类似地用于识别/选择元素。

同一个类名可以应用于多个元素（例如，几个按钮可以包含该类），但不允许两个元素具有相同的ID。

回答你的问题：

var ta = $('textarea');
$('button').click(function(){
    if (this.id == "eraseit"){
        ta.text('');
    }else{
        if ( $(this).hasClass('bob') )  {
            ta.text( ta.text() + ' bob' );
        }else if ( $(this).hasClass('x') )  {
            var ans = prompt('What is your name?');
            ta.text( ta.text() + ans );
        }else{
            ta.text( ta.text() + $(this).text() );
        }
    }
});

jsFiddle Demo #3

从点击按钮写入文本区域的Javascript

3 个答案:

JS

HTML

FIDDLE