Блог

Главная - Вопросы по программированию - Обнаружить изменение атрибута (немедленно) с помощью jQuery?

Обнаружить изменение атрибута (немедленно) с помощью jQuery?

#javascript #jquery

Вопрос:

Я использую java-скрипт для создания веб-страницы, и у меня есть несколько входов типа text с read-only атрибутом, и я хочу определить, изменился ли какой-либо ввод в его атрибутах, например, если какой-либо ввод удалил свой атрибут только для чтения, затем сделайте что-нибудь с этим вводом.

Примечание: Я собираюсь изменить атрибут только для чтения, используя код java-скрипта. И я хочу, чтобы другой код обнаружил это изменение атрибута только для чтения.

Я уже пробовал это

   $('input[readonly]').attrchange({
    trackValues: true,
    callback: function (event) { 
  
    }

но мне нужен любой ввод в документ.

Комментарии:

1. Просто измените $("#input-id") на $(document)

2. Кто удаляет readonly атрибут? Поместите туда свою функцию. Пользователь не может удалить его

3. $(document).on("input", ... сделайте и то и другое change keyup paste

4. Это немного похоже на проблему XY. readonly Собственность не исчезнет волшебным образом. Так что либо вы делаете это в своем коде, но если вы знаете, что удаляете это свойство, почему вы не можете затем прослушать изменения в этом элементе? Если вы не удалите его, а пользователь сделает это с помощью инструментов разработчика, то какую проблему вы пытаетесь там решить?

5. ДИАА, я не понимаю, ты говоришь but I need for any input in the document , но ты используешь код $('input[readonly]') , так почему бы просто не использовать $('input')

Ответ №1:

Я не знаю, является ли это ответом, но я не могу изложить все это в комментарии.

Кроме того, реализация этого, вероятно, не будет такой гладкой и простой, как в jQuery.

Вы можете установить Изменяемого наблюдателя, который будет обнаруживать любые изменения в элементах. Наблюдатель установлен на родителе, и вы можете выбрать, что обнаруживать. Это то, что делают программы чтения с экрана, чтобы адаптироваться к любым изменениям на странице. Загвоздка в том, что вам нужно будет немного изучить это, прежде чем вы сможете его использовать.

Ответ №2:

Вы можете использовать наблюдателей мутаций для обнаружения любых изменений в элементах, которые вы хотите!

Ниже приведен простой пример, который может потребоваться изменить в зависимости от ваших потребностей:

 //Get all input elements
var inputs = document.getElementsByTagName('input');

//This is the callback function on when the filtered attribute changes
const observer = new MutationObserver(function (mutations, observer) {
   //Here you can write any code to trigger when the mutation happens.
});

//We bind the observer to observe all the changes in the readonly attribute
observer.observe(inputs, {
  attributes: true,
  attributeFilter: ['readonly']
});

Обратите внимание, что я не тестировал приведенный выше код, поэтому в нем могут потребоваться какие-либо конкретные изменения!

Метки: