Блог

У меня есть поле ввода, в которое пользователь может либо вводить данные, либо вводить данные, щелкая элемент списка (который создает текст в строках «[текст]»), либо может вводить текст, перетаскивая элемент списка. Последние операции реализуются скриптом, представленным на этой странице.

Я хотел бы удалить лишние пробелы из поля ввода, когда пользователь вводит в него данные любыми способами (включая вышеуказанные, а также копирование и вставку). Я думал, что с этим справится следующее:

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

Однако это не учитывает события перетаскивания и не вводит ввод щелчком мыши. Может кто-нибудь сказать мне, как справиться с удалением лишних пробелов при вводе, отбрасывании и щелчке? Спасибо.

РЕДАКТИРОВАТЬ: вот решение, основанное на ответе, предложенном ниже Николасом Хенрардом:

 $('#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, ' '));
});
  

Недостатком этого, как и решения Николаса, является то, что он пренебрегает удалением пробелов, добавленных последним тегом, который был удален или нажат (т. Е. При отбрасывании или нажатии тега добавляется что-то вроде » [текст]», что оставляет дополнительный пробел, если перед этим был пробелэлемент до тех пор, пока, если решение выше не будет реализовано, не произойдет какое-либо другое взаимодействие с элементом списка или вводом). Это можно исправить, добавив .trim() ко второму .val обоих операторов выше, но это похоже на что-то вроде взлома. Есть идеи по решению этой проблемы с последним удаленным или нажатым тегом?

Этот код 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

Попробуйте использовать .focusOut(), это должно обрабатывать все события, как только пользователь покидает текстовое поле, независимо от щелчка, выпадения, вкладок и т. Д.

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

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