3

目前，我有许多输入字段共享同一个 class inputField，并且我有一个.blur事件可以修剪在焦点输出上输入的任何字符串并使用结果更新字段，如下所示：

$('.inputField').blur(function() {
   var input = $.trim($(this).val());
   $(this).val(input);
});

这是HTML：

<div class='form'>
   <label>Email Address:</label>
   <input id='input_emailAddress' class='inputField' type='email' name='input_emailAddress'>
   <label>Confirm Email:</label>
   <input id='input_emailAddressConf' class='inputField' type='email' name='input_emailAddressConf'>
</div>

在 Firefox、Safari 中效果很好，但在 Chrome 中效果不佳（不确定 IE）。我尝试删除/重新添加类以强制“刷新”但不行。这是一个已知问题吗？好奇什么是好的/干净的解决方案？谢谢！

再次编辑 PS，代码本身运行良好。这不是语法问题——JSHint 很清楚，控制台中没有错误。它仅在 Chrome (ver 30.0+) 中不起作用谢谢！

4

3 回答 3

2

找到了一个“丑陋”的解决方法，它似乎在所有三种浏览器中都可以合作：

在 CSS 中添加了一个没有任何内容的额外类input.refresh {}，然后添加以下代码以强制刷新：

$(this).addClass('refresh').removeClass('refresh');
于 2013-10-16T22:03:00.177 回答
2

我们解决了这个问题（https://bugs.chromium.org/p/chromium/issues/detail?id=423785）与focusout事件（哪个冒泡，blur没有）并在修剪时更改输入类型：

formElement.addEventListener('focusout', function(event) {
   if (event.target.type === 'email') {
      event.target.type = 'text';
      event.target.value = event.target.value.trim();
      event.target.type = 'email';
   }
});

你仍然可以使用blur，如果你使用addEventListeneron input[type="email"]，那么你也可以省略 if 语句。

于 2019-05-16T11:46:00.850 回答
1

它看起来像一个 Chrome 错误，因为它仅在您尝试将值设置为修剪后的当前值时发生。如果我们在这里找到了一些解决方案，我会更新我的答案分享。实际上，如果您拆分值并更新该字段两次，它将起作用，但我认为这不是可接受的解决方法。

于 2016-04-27T14:45:55.920 回答