Question

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

现在我对JQuery不是很了解，所以我发现这个教程是关于如何创建一个JQuery键盘，当按下按钮时填充TextArea字段。

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

我遇到的问题是JQuery键盘填充了textarea，我真的需要它来填充输入字段。看起来这应该是一个相当简单的改变，但我不能为我的生活弄明白。

我的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时我是一个菜鸟，我希望有一个快速简便的解决方案。

谢谢大家。

Answer 1

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

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

Answer 2

输入字段中的文本不是html，因此您无法使用.html（）分配它，以使用您应该更改的文本填充输入字段

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

到此。

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

或者简单地使用.val（）作为前面提到的海报，这是jQuery方式。

JQuery Keyboard填充输入而不是textarea？

2 个答案: