输入值由于输入font size＝“”而返回空字符串;0〃;

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

本文关键字：输入 返回 字符串 于输入 font size      更新时间：2023-09-26

我发现了一个困扰我几个星期的问题。我正在使用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>元素，并且它仍然可以接受用户输入？

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

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

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

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

但你的项目似乎很具体。

相关文章：