JQuery键盘填充输入而不是textarea？答案

【问题标题】：JQuery Keyboard populate input instead of textarea?JQuery键盘填充输入而不是textarea？
【发布时间】：2012-04-01 02:19:46
【问题描述】：

我目前正在开发一个计时系统项目，员工可以走到触摸屏计算机（或平板电脑）前输入他或她的 4 位数员工编号并打卡。

现在我对 JQuery 不是很好，所以我找到了这个教程，介绍如何创建一个 JQuery 键盘，当按下按钮时填充一个 TextArea 字段。

这对我来说非常有用，我已经能够通过使用本教程和一些 php 来处理表单来实现我想要的。

我遇到的问题是 JQuery 键盘填充了一个文本区域，我真的需要它来填充一个输入字段。看起来这应该是一件相当简单的改变，但我一生都无法弄清楚。

我的 HTML 表单

<form action="index.php" method="post">
<textarea id="write" name="code" rows="6" cols="60"></textarea>

<ul id="keyboard">
    <li class="symbol"><span class="off">1</span></li>
    <li class="symbol"><span class="off">2</span></li>
    <li class="symbol"><span class="off">3</span></li><br /><br /><br />
    <li class="symbol"><span class="off">4</span></li>
    <li class="symbol"><span class="off">5</span></li>
    <li class="symbol"><span class="off">6</span></li><br /><br /><br />
    <li class="symbol"><span class="off">7</span></li>
    <li class="symbol"><span class="off">8</span></li>
    <li class="symbol"><span class="off">9</span></li><br /><br /><br />
    <li class="symbol-zero"><span class="off">0</span></li>
    <li class="delete">Clear</li>
</ul>
        <input class="submit-in" type="submit" name="clock" value="In">
        <input class="submit-out" type="submit" name="clock" value="Out">

</form>

用于键盘的 JQuery

$(function(){
var $write = $('#write'),
    shift = false,
    capslock = false;

$('#keyboard li').click(function(){
    var $this = $(this),
        character = $this.html(); // If it's a lowercase letter, nothing happens to this variable



    // Delete
    if ($this.hasClass('delete')) {
        var html = $write.html();

        $write.html(html.substr(0, html.length - 999));
        return false;
    }

    // Special characters
    if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
    if ($this.hasClass('symbol-zero')) character = $('span:visible', $this).html();
    if ($this.hasClass('space')) character = ' ';
    if ($this.hasClass('tab')) character = "\t";
    if ($this.hasClass('return')) character = "\n";



    // Add the character

    $write.html($write.html() + character); }); });

任何帮助都将不胜感激，就像我说我是 JQuery 的菜鸟，我希望有一个快速简便的解决方案。

谢谢大家。

【问题讨论】：

标签： jquery input keyboard keypad

【解决方案1】：

将<textarea id="write" name="code" rows="6" cols="60"></textarea> 更改为<input type="text" id="write" name="code" />

将$write.html 的所有实例替换为$write.val

【讨论】：

就是这样！谢谢！我认为这可能是 js 中的一些简单的东西。

【解决方案2】：

输入字段中的文本不是 html，因此您不能使用 .html() 对其进行分配，以使用您应该更改的文本填充输入字段

 $write.html($write.html() + character);

到这个。

$write.attr('value', $write.attr('value') + character);

或者像之前的海报所说的那样简单地使用 .val() ，这是 jQuery 方式。

【讨论】：