由于输入 font-size="0"，输入值 returns 为空字符串

Question

我发现了一个困扰我几个星期的问题。我正在使用 jQuery 检索输入文本。用户输入一些字符并按 ENTER，然后我在控制台中打印文本。

html:

<input id="abc" type="text" autofocus style="font-size:0;">

jQuery:

$(document).on('keypress', '#abc', function(e) {
  if (e.which!=13) { 
    return;
  }
  console.log('Entered: ' + $('#abc').val());
  $('#abc').val('');
});

如果我使用 Firefox，一切都很好。但是，如果我使用 Chrome 或 Opera，它们将 return 一个空字符串。

终于发现问题出在font-size="0"（我想隐藏输入）。如果该值为 0 以外的任何值，Chrome 和 Opera 将可以毫无问题地拾取输入的文本。

问题：

这是为什么？
如何隐藏 <input> 元素并且它仍然可以接受用户输入？

Answer 1

要回答您的第二个问题，您可以使用 CSS 样式，例如文本缩进。文本将隐藏在屏幕外，您仍然可以获取该值。

<input id="abc" type="text" autofocus style="text-indent:-9999em;">

我相信还有其他方法可以做到这一点...比如将输入定位在屏幕外

<input id="abc" type="text" autofocus style="position:absolute; left:-9999em; top:-9999em">

但是你的项目看起来很具体。

由于输入 font-size="0"，输入值 returns 为空字符串

Input value returns an empty string due to input font-size="0"

javascript

jquery

html-input