Question

目前，我有许多输入字段共享同一个类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）。我尝试删除/重新添加类以强制“刷新”，但没有去。这是一个已知的问题吗？好奇什么是好/干净的解决方案？谢谢！

编辑P.S.再次，代码本身工作正常。这不是语法问题 - JSHint很清楚，控制台没有错误。它只适用于Chrome（版本30.0+）谢谢！

Answer 1

找到了一个似乎在所有三种浏览器中合作的'丑陋'解决方法：

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

$(this).addClass('refresh').removeClass('refresh');

Answer 2

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

Answer 3

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

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，如果您在addEventListener上使用input[type="email"]，那么也可以省略if语句。

jQuery：如何更新输入字段值（不在Chrome中工作）

3 个答案: