Question

我正在做某种屏幕键盘，你点击某些形状和字母写在textarea上。但是我希望它也适用于物理键盘。

将文本写入textarea后。我想将文本保存在字符串上并打印出来。

它正在使用形状，但是由于某种原因，它使用物理键盘，它不会识别写入的第一个字符。只有第二个。谢谢！

演示：http://jsfiddle.net/bcorreia/e49v18bh/2/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg width="60px" height="60px">
    <rect width="50" height="50" data-character="a" />
</svg>
<svg width="60px" height="60px">
    <rect width="50" height="50" data-character="b" />
</svg>

<textarea id="text"></textarea>

JS

 function getText() {
        var search_id = $("textarea#text").val();
        console.log(search_id);
        var dataString = 'search='+ search_id;

        if(search_id!='') {
            console.log("enter");
        };
    }

    $(function() {
        $('svg rect[data-character]').click(function() {
            var character = $(this).data('character');
            $('#text').val(function(i, old) { return old + character; });
            getText();
        });

        $('#text').keypress(function(e) {
            var character = String.fromCharCode(e.which);
            getText();
        });
    });

Answer 1

你可以看到它是一个背后的按键，使用keyup：

$('#text').keyup(function(e) {
    var character = String.fromCharCode(e.which);
    getText();
});

http://jsfiddle.net/e49v18bh/4/

Answer 2

尝试在keypress上使用keyup事件

$('#text').keyup(function(e) {
   var character = String.fromCharCode(e.which);
   getText();
});

演示：http://jsfiddle.net/e49v18bh/3/

keyup - 在键盘上释放键时触发了事件。

keypress - 在键盘上按下某个键时触发事件。

Answer 3

我注意到一些不必要的代码。在$('#text').keypress()上，您声明变量character但尚未使用它。

它不打印初始键盘输入的原因是因为你正在使用.keypress()，当按下键时（嗯，是的），它会在输入字符之前向右触发。使用.keyup()代替在输入字符并且用户完成按键后激活它。

Javascript - 从文本框中获取值并将其保存在字符串中

3 个答案: