Question

我一直在查看Stack Overflow几个小时，但仍无法找到解决此问题的方法。任何帮助表示赞赏。

基本上，我编写了一个应用程序，让用户尝试解决密码。我已经为密码的每个字母动态创建了一个输入字段，输入字段下面有编码字母。

以下是它的简化版本：

var correctString = "HELLO FROM OUTER SPACE";
var encryptedString = "JFPPK QWKC KHRFW ZXIMF";
var encryptedStringWithoutSpaces = encryptedString.replace(/[^a-zA-Z-]/g, '');

/* CREATE INITIAL INPUTS AND DIVS */
$('#container').append('<div class="word"></div>');
for(var i = 0; i < correctString.length; i++) {
    if(correctString[i] === ' ') {
        $('#container').append('<div class="space"></div>')
        $('#container').append('<div class="word"></div>')
    } else {
        $('.word').last().append('<div class="letter"><input name="letter" type="text" maxLength="1"></input><p>'
            + encryptedString[i] + '</p></div>');
    }
}

/* DISPLAY ALL SIMILAR LETTERS TO MOST RECENTLY INPUT VALUE */
$('#container').on('keypress', 'input', function(e) {
    var char = String.fromCharCode(e.keyCode);
    var index = $('input').index(this);
    for(var i = 0; i < encryptedStringWithoutSpaces.length; i++) {
        if (encryptedStringWithoutSpaces[i] === encryptedStringWithoutSpaces[index] && i != index) {
            $($('input').get(i)).val(char);
        }
    }
});

所以当我尝试将程序编码到如果用户在'k'上方的输入字段中输入'o'时，问题出现了，'k'之上的所有输入字段将具有'o'在他们中间。这一行：

$($('input').get(i)).val(char);

这可以在浏览器中使用，当我在DevTools中查看应用程序的移动版本时，但是当我在实际手机上打开应用程序时，它无效。

以下是完整代码：

var correctString = "HELLO FROM OUTER SPACE";
var encryptedString = "JFPPK QWKC KHRFW ZXIMF";
var encryptedStringWithoutSpaces = encryptedString.replace(/[^a-zA-Z-]/g, '');

/* CREATE INITIAL INPUTS AND DIVS */
$('#container').append('<div class="word"></div>');
for (var i = 0; i < correctString.length; i++) {
  if (correctString[i] === ' ') {
    $('#container').append('<div class="space"></div>')
    $('#container').append('<div class="word"></div>')
  } else {
    $('.word').last().append('<div class="letter"><input name="letter" type="text" maxLength="1"></input><p>' +
      encryptedString[i] + '</p></div>');
  }
}

/* DISPLAY ALL SIMILAR LETTERS TO MOST RECENTLY INPUT VALUE */
$('#container').on('keypress', 'input', function(e) {
  var char = String.fromCharCode(e.keyCode);
  var index = $('input').index(this);
  for (var i = 0; i < encryptedStringWithoutSpaces.length; i++) {
    if (encryptedStringWithoutSpaces[i] === encryptedStringWithoutSpaces[index] && i != index) {
      $($('input').get(i)).val(char);
    }
  }
});

#container {
  margin: 0 auto;
  width: 70%;
  text-align: center;
}

.letter,
.space {
  display: inline-block;
}

.space {
  width: 40px;
}

input {
  border: 1px solid black;
  text-transform: uppercase;
  text-align: center;
  width: 30px;
  margin: 0 5px;
}

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

Answer 1

keyCode

中的e上没有$('#container').on('keypress', 'input', function(e) {})属性

而是使用类似的东西：

var char = e.originalEvent.key.length === 1 ? e.originalEvent.key : '';

我检查长度是1，因为如果你没有结束＆＃34;退格＆＃34;和＆＃34;删除＆＃34;等，因为这些也是有效的密钥。

Answer 2

keypress事件不会在移动设备上触发。更好的方法是使用keyup事件并检查事件处理程序中输入的值而不是按下的键（以保持像 Tab 这样的非字符键不会破坏字符在其他输入中）：

/* DISPLAY ALL SIMILAR LETTERS TO MOST RECENTLY INPUT VALUE */
$('#container').on('keyup', 'input', function(e) {
  var char = $(this).val();
  var index = $('input').index(this);
  for (var i = 0; i < encryptedStringWithoutSpaces.length; i++) {
    if (encryptedStringWithoutSpaces[i] === encryptedStringWithoutSpaces[index] && i != index) {
      $($('input').get(i)).val(char);
    }
  }
});

jQuery - 为什么$（'input'）。val（char）不更新移动设备上的输入值？

2 个答案: