iOS Safari 输入类型文本在元素大小调整后部分失去焦点

Piw*_*aka 5 html javascript input mobile-safari

我有一个输入元素 type='text',它在 iOS Safari 中进入错误状态,这样输入元素就会出现焦点并分派 keyup 事件,但不会更新字段的值;用户键入时看不到新字符。在我正在构建的网站中,我在调整焦点文本输入元素的大小***后触发此状态。我制作了一个 jsfiddle 可以可靠地重现该错误:

<input id='ipt' type='text' style='width:250px;height40px;'/> 

<script>
  var ipt = document.getElementById('ipt');
  ipt.addEventListener("keyup", onkeyup, false);
  function onkeyup(e){
    ipt.style.width = '100px';  
    ipt.removeEventListener("keyup", onkeyup, false);
  }
</script>
Run Code Online (Sandbox Code Playgroud)

重现该错误:

  1. 在 iOS Safari 中打开http://jsfiddle.net/55dth/embedded/result
  2. 通过点击聚焦输入元素
  3. 捏缩放以显示输入的完整宽度(需要触发错误)
  4. 输入一些东西

我想了解为什么它会进入这种有缺陷的状态,以及我如何才能避免它。它很可能涉及 iframe 和文档设置。我必须在 iframe 中,并且需要更改文本字段的宽度。

或者说如何摆脱这种状态。我可以通过侦听 keyup 并检查插入点处的值与事件中的键值进行比较来检测我是否处于该状态。我尝试切换只读、重置值、焦点()、切换输入模式...


** 我想调整元素的大小 - 以便在键盘打开时有更多的水平空间可以打字。

*我很确定进入这种状态还需要其他条件,但是我不确定确切的条件。