Question

我有一个输入字段，用户可以在其中键入数据，可以通过单击列表项（可以生成文本，＆＃39; [text]＆＃39;）来输入数据，或者可以输入通过拖放列表项来发送文本。后面的操作由提供的脚本on this page实现。

当用户通过任何方式（包括上述内容，以及复制和粘贴）将数据输入到输入字段时，我想从输入字段中删除多余的空格。我认为以下会处理它：

$('#my_input').on('change', function() {
   $(this).val($(this).val().replace(/  +?/g, ' '));
});

但是，这并不会处理拖放事件，也不会通过单击输入输入。任何人都可以告诉我如何处理在打字，删除和点击时删除额外的空格？谢谢。

编辑：以下是基于Nicolas Henrard提供的答案的解决方案：

$('#my_input').on('propertychange keyup input paste drop click', function() {
  $(this).val($(this).val().replace(/  +?/g, ' '));
});

$('.my_list_item').on('propertychange click', function() {
  $('#my_input').val($('#my_input').val().replace(/  +?/g, ' '));
});

与尼古拉斯的解决方案一样，它的缺点是它忽略了删除被删除或点击的最后一个标签添加的空白（即当标签被删除或点击时，它会添加类似＆＃的内容39; [text]＆＃39;，如果在此项之前有空格则留下额外的空格，如果实现上述解决方案，则与列表项或输入进行一些其他交互）。这可以通过将.trim（）添加到上面两个语句的第二个.val来修复，但这看起来像是一个黑客攻击。有关解决此最后删除或点击标记问题的任何想法吗？

Answer 1

这个jQuery代码可以捕获任何元素的即时更改，并且应该适用于所有浏览器：

$('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

所以，你必须等待这些事件：propertychange keyup input paste

Answer 2

尝试使用.focusOut（），这应该在用户离开文本框时立即处理所有事件，无论点击，丢弃，标签等等。

$('#my_input').on('focusout', function() {
   $(this).val($(this).val().replace(/  +?/g, ' '));
});

http://api.jquery.com/focusout/

修改keyup上的输入字段，单击和删除事件

2 个答案: