3

Допустим у нас есть такой код и допустим пользователь оказался хитрым. Он вставил некий скрипт в код который изменяет значение у select при событии click :

document.addEventListener('click',function(){document.querySelectorAll("select")[0].value=document.querySelectorAll("option")[2].value},false)
<select onchange="console.log(event.target.value)">
  <option  value="Firefox Best!!!"  selected> Firefox Best!!! </option>
  <option  value="Firefox Very best!!!" > Firefox Very best!!!</option>
  <option  value="Chrome Best!!!" >Chrome Best!!!</option>
</select>

Теперь selectElement.value="Chrome Best!!!" и так как отловить изменение value у select? Только не предлагать по таймингу.

4
  • ну изменяет он значение, и что?
    – user176262
    6 янв 2018 в 20:10
  • 1
    Ваш вопрос грубо говоря звучит так: "Как не позволить пользователю, на стороне пользователя сделать выбор". Какая разница изменил пользователь значение руками или с помощью скрипта? 6 янв 2018 в 20:56
  • Мне интересно существуют ли события или еще что-нибудь подобное для отлова изменений value у select. Если не знаете ответа, то не стоит комментировать риторическими вопросами "А зачем тебе это?", "Какая разница ... ?" и т.п. 6 янв 2018 в 21:38
  • @VasiliyRusin, если почитать комментарии к ответам, его просто интересует, как отловить порграммное изменение значения, чтобы вызвался обработчтик.
    – Qwertiy
    7 янв 2018 в 23:23

5 ответов 5

3

Как оказалось в комментариях, вопорс сводится к тому, как сделать, чтобы событие change вызывалось при программном изменении значения в select'е.

Например, в следующем коде событие не возникает при нажатии кнопки:

document.querySelector("select").addEventListener('change', function (e) {
  console.log("Changed to: " + e.target.value)
})

document.querySelector("button").addEventListener('click', function (e) {
  console.log("Button clicked: enter")
  document.querySelector("select").value = 2
  console.log("Button clicked: leave")
})
<select>
  <option value=1 selected>Option 1</option>
  <option value=2>Option 2</option>
  <option value=3>Option 3</option>
</select>

<button>#2</button>

Решением может быть перехват присваивания при помощи сеттера свойства.

Следующий код проверен в Chrome 43 (в IE надо будет поменять способ создания события):

var select = document.querySelector("select");

select.addEventListener('change', function (e) {
  console.log("Changed to: " + e.target.value)
})

var original = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value');

Object.defineProperty(select, 'value', {
  get: original.get,
  set(val) {
    console.log("set value: " + val)
    var old = this.value
    var res = original.set.call(this, val)
    if (old != val) this.dispatchEvent(new Event('change'))
    return res
  }
})

document.querySelector("button").addEventListener('click', function (e) {
  console.log("Button clicked: enter")
  document.querySelector("select").value = 2
  console.log("Button clicked: leave")
})
<select>
  <option value=1 selected>Option 1</option>
  <option value=2>Option 2</option>
  <option value=3>Option 3</option>
</select>

<button>#2</button>

Это же решение можно применить для всех select'ов:

document.querySelector("select").addEventListener('change', function (e) {
  console.log("Changed to: " + e.target.value)
})

var original = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value');

Object.defineProperty(HTMLSelectElement.prototype, 'value', {
  get: original.get,
  set(val) {
    console.log("set value: " + val)
    var old = this.value
    var res = original.set.call(this, val)
    if (old != val) this.dispatchEvent(new Event('change'))
    return res
  }
})

document.querySelector("button").addEventListener('click', function (e) {
  console.log("Button clicked: enter")
  document.querySelector("select").value = 2
  console.log("Button clicked: leave")
})
<select>
  <option value=1 selected>Option 1</option>
  <option value=2>Option 2</option>
  <option value=3>Option 3</option>
</select>

<button>#2</button>

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

2
  • У вас считается плохая практика переопределять методы у объектов? Переопределять методы это часть ООП. Еще понял что лучше следить за свойством selectedIndex чем за value. Как раз нашел документацию Реализация HTMLSelectElement.selectedIndex. 8 янв 2018 в 11:39
  • @АлексТвояТруба, плохая практика - глобально портить встроенные объекты.
    – Qwertiy
    8 янв 2018 в 19:27
2

Никак, пользователь вообще может даже не в скрипте это заменить а через f12 в режиме отладки страницы, кроме того он вообще может отключить все скрипты на странице, сделать любые замены через f12 и потом снова включить скрипты, и вы ничего не поделаете никакими "защитными" мерами.

Кроме того он может вообще получаемый от сервера html код перехватить например снифером или прокси и внедрить туда что угодно.

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

В любом случае любой запрос от клиента на сервер надо валидировать, и вот это взломать уже мало реально, при учёте грамотного кода и надёжного сервера.

По сути варианта без валидации запросов на сервере в нормальном и защищённом коде быть не должно.

4
  • Дело в другом. Выдуманная ситуация с пользователем чисто гипотетическая. Я просто насмотрелся на все многообразие веб верстальщиков. OMG, то ли костыли, то ли я не врубаюсь. Код на некоторых сайтах настолько ужасно выглядит, да и большие участки кода требуют рефакторинга. Вот жду помощи от просветленных достигнувших дзен. Как мне отловить изменение value у элемента. Пздынь, кипит голова. 6 янв 2018 в 22:44
  • @АлексТвояТруба ясно. может что-то и есть, это надо в новых версиях ECMA script смотреть, в старых точно нет, слышал что отслеживания изменений хотели в новых версиях вводить, но подробности не знаю. 6 янв 2018 в 22:48
  • @АлексТвояТруба Посмотрите вот эту тему - stackoverflow.com/questions/3219758/detect-changes-in-the-dom 6 янв 2018 в 22:52
  • применение Mutation Events является устаревшим. Вместо них используйте MutationObserver. Пока не до конца прочитал, но думаю стоит прощупать. 6 янв 2018 в 23:24
1

Вам необходимо использовать MutationObserver.

function changeElement() {
  document.getElementById("id1").value = "zzz";
}

var mo = new MutationObserver(observe);
var el = document.getElementById("id1");
var config = {
  attributes: true,
  childList: true,
  subTree: true
};
mo.observe(el, config);

function observe() {
  alert("change");
}
<select onchange="console.log(event.target.value)">
  <option  value="Firefox Best!!!"  selected> Firefox Best!!! </option>
  <option  value="Firefox Very best!!!" > Firefox Very best!!!</option>
  <option id="id1" value="Chrome Best!!!" >Chrome Best!!!</option>
</select>

<a href="#" onclick="changeElement(); return false;">изменить</a>

Документация - https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

8
  • Прочитал документацию к MutationObserver и он реагирует на "мутацию" так сказать на "innerHTML". В вашем примере вы изменяли тег option и реакция была. А в моем примере скорее значение объекта/элемента (как кому удобнее называть) меняется. Мутации HTML кода нет и нет реакции от MutationObserver. Возможно я и ошибаюсь. Еще путаюсь в веб-разработке. Столько технологий. Кашка в голове :) 7 янв 2018 в 11:55
  • 1
    @АлексТвояТруба да, понял что вам надо, похоже такое реально не отлавливает. В вашем примере меняется состояние, но сам DOM не трогается как я понял, хотя по идее должна у option меняться selected, но такое похоже MutationObserver не отлавливает. 7 янв 2018 в 12:29
  • Ваш ответ оказался правильным на поставленный вопрос. Но пример оказался исключением. Пока буду ждать может можно как-то в JS поставить событие на изменение объекта. 7 янв 2018 в 12:33
  • 1
    @АлексТвояТруба Сюда смотрите - developer.mozilla.org/ru/docs/Web/JavaScript/Reference/… то есть это есть, но в новой спецификации ECMA script 7 7 янв 2018 в 12:36
  • @АлексТвояТруба поддержки браузерами пока почти нет 7 янв 2018 в 12:37
1

Эта функциональность есть, но она находится в экспериментальной части на данный момент ECMAScript 7

Object.observe(obj, callback)

в вашем случае это должно работать так

var sel = document.getElementById("select1");
Object.observe(sel , () => console.log("changed"));

Документация - https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/observe

На данный момент эта функциональность почти не поддерживается браузерами.

4
  • Надеюсь его не исключат из стандарта. В Gecko есть реализация Object.prototype.watch() документация. На данный момент такой код document.getElementsByTagName("select")[0].watch('value', function(){console.log(this.value)}) работает но выдает предупреждение 'Object.prototype.watch and unwatch are very slow, non-standard, and deprecated; use a getter/setter instead' 7 янв 2018 в 13:33
  • Эм.. Вообще-то Object.observe вообще не в стандарте, был реализован в Chrome 36 и удалён в Chrome 50 в связи с исключением из черновика стандарта. А ES7 - это ES2016, который уже давно принят и реализован.
    – Qwertiy
    7 янв 2018 в 22:39
  • Если что, вместо него в ES6 есть Proxy, но к этому вопросу он не относится.
    – Qwertiy
    7 янв 2018 в 22:59
  • Вот документация Ecma-262 PDF. Нужно будет прочитать на досуге. 8 янв 2018 в 11:49
0

Проще всего помоему через jquery))

<select class="status">
         <option  value="Firefox Best!!!"  selected> Firefox Best!!! </option>
         <option  value="Firefox Very best!!!" > Firefox Very best!!!</option>
         <option  value="Chrome Best!!!" >Chrome Best!!!</option>
</select>

$(function() {
   $('.status').change(function() {
      console.log($(this).val());
   });
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.