JQuery Клавиатура заполнить ввод вместо textarea? - PullRequest
Новая
       8

JQuery Клавиатура заполнить ввод вместо textarea?

0 голосов
/ 15 марта 2012

В настоящее время я работаю над проектом системы учета времени, в которой сотрудник может подойти к компьютеру (или планшету) с сенсорным экраном, набрав его или ее 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, и я надеюсь, что есть быстрыйи простое решение.

Спасибо всем.

Ответы [ 2 ]

0 голосов
/ 15 марта 2012

Текст внутри поля ввода не html, поэтому вы не можете назначить его с помощью .html (), чтобы заполнить поле ввода вашим текстом, вы должны изменить 

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

к этому. 

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

Или просто используйте .val (), как указано в предыдущем постере, это способ jQuery.

0 голосов
/ 15 марта 2012

Изменить <textarea id="write" name="code" rows="6" cols="60"></textarea> на <input type="text" id="write" name="code" />

Заменить все экземпляры $write.html на $write.val

...