javascript - 由于输入字体大小 ="0"，输入值返回空字符串

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，它们将返回空字符串。

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

问题:

1. 这是为什么？

2. 如何隐藏 <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"> 

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