Обработка события onchange

24.12.2018 От Админ 10 комментариев

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

текстовых полей при потере фокуса после изменения значения
выпадающих списков (select)
полей для ввода чисел (number)
ползунков (range)
флажков (checkbox)

Обработка события onchahge для текстовых полей

Текстовые поля изменяются при вводе текста в них, но в отличие от события oninput, эти изменения для события onchange становятся заметны только после потери фокуса текстовым полем. В примере ниже вы можете набрать любой текст в поле, а затем нажать на кнопку с текстом "Проверить" или кликнуть в любом месте примера или страницы. После этого набранный вами текст отобразится ниже поля ввода. Также можно нажать клавишу Enter или Tab.

Код примера приведен ниже:

<input id="myText" type="text" value="">
<input type="button" class="btn btn-primary" value="Проверить">
<div id="output"></div>

<script>
 myText.onchange = function(){
   output.innerHTML = this.value;
 }
</script>

myText.onchange = function(){

output.innerHTML = this.value;

}

</script>

Аналогичным способом мы можем обработать событие onchange для большого текстового поля (элемент <textarea>). В примере ниже мы получим текст из этого поля с id="myArea" при нажатии на клавишу Tab, т.е. тоже при потере фокуса текстовым полем.

<label for="myArea">Обработка события onchange для textarea</label>
<textarea id="myArea" rows="5" cols="20"></textarea>

<div id="outputArea" style="padding: 5px; margin: 10px 0">
Нажми Tab, когда закончишь ввод текста</div>

<script>
 myArea.onchange = function(){
   outputArea.innerHTML = "Введен текст: "+this.value;
 }
</script>

<label for="myArea">Обработка события onchange для textarea</label>

Нажми Tab, когда закончишь ввод текста</div>

myArea.onchange = function(){

outputArea.innerHTML = "Введен текст: "+this.value;

}

</script>

Обработка события onchange для textarea

Нажми Tab, когда закончишь ввод текста

Обработка события onchahge для выпадающего списка

Задача у нас будет такая: нужно поменять картинку в теге img c id="picHolder", выбрав ее из выпадающего списка по названию. Поскольку элемент <select> является "подчиненным", т.е. дочерним элементом тега <form>, то в html-разметке мы создадим соответствующие теги и зададим каждому из них атрибут name:

<img id="picHolder" src="wp-content/uploads/examples/js-examples/cups/cup1.jpg" alt="Чашка с котом">
<form name="picForm">
  <select name="picSelect">
    <option value="images/cup1.jpg">Кот-выпивоха</option>
    <option value="images/cup2.jpg">Удивленный кот</option>
    <option value="images/cup3.jpg">Кот в очках с галстуком</option>
    <option value="images/cup4.png">Чашка с овцой</option>
  </select>
</form>

<option value="images/cup1.jpg">Кот-выпивоха</option>

<option value="images/cup2.jpg">Удивленный кот</option>

<option value="images/cup3.jpg">Кот в очках с галстуком</option>

<option value="images/cup4.png">Чашка с овцой</option>

</select>

</form>

Элемент select в свою очередь является родительским контейнером для нескольких элементов <option>, которые и формируют пункты списка. В каждом из них есть атрибут value, в который мы запишем путь к картинкам из папки images. Именно этот атрибут и будет "главным действующим лицом" в нашем скрипте.

Событие onchange наступает для списка, когда пользователь выбирает другой пункт. В этот момент мы можем назначить в src картинки, обратившись к ней по id (picHolder) значение атрибута value списка, подхватываемого им из выбранного элемента option. Обращение к самому списку происходит в виде name_формы.name_списка. Получаем такой несложный скрипт:

<script> 
 picForm.picSelect.onchange = function(){
   picHolder.src = this.value; 
 } 
</script>

picForm.picSelect.onchange = function(){

picHolder.src = this.value;

}

</script>

Обработка события onchahge для полей с типом number

Поле с типом number изменяется при вводе значения вручную или при клике по стрелочкам этого поля. Если вы вводите цифры вручную, то нужно нажать клавишу Enter или увести фокус на другой элемент. Можно, например, нажать клавишу Tab.

В качестве примера будем изменять ширину div-а с помощью поля для ввода чисел. В этом поле мы можем указать минимальное (min), максимальное (max), текущее значение (value) и шаг приращения/уменьшения числа (step). При обработке события onchange нам понадобится изменения атрибута и js-свойства value:

<label for="myNumber">Меняем ширину блока</label>
<input id="myNumber" type="number" value="200" min="50" max="400" step="50">

<div id="myBox" style="width: 200px; height: 200px; margin: 15px; 
background: pink; border: 3px double #ee5757"></div>

<script>
  myNumber.onchange = function(){
    myBox.style.width = this.value +"px";
  }
</script>

<label for="myNumber">Меняем ширину блока</label>

<div id="myBox" style="width: 200px; height: 200px; margin: 15px;

background: pink; border: 3px double #ee5757"></div>

myNumber.onchange = function(){

myBox.style.width = this.value +"px";

}

</script>

Проверяем результат.

Меняем ширину блока

Обработка события onchahge для полей с типом range

Для ползунков (элементы типа <input type="range">) событие onchange наступает при перемещении ползунка. У этого элемента такие же атрибуты, как и у поля для ввода чисел (<input type="number">). При обработке события onchange нам понадобится значение ползунка, которое мы получаем с помощью его атрибута и js-свойства value. Для того, чтобы видеть числовое значение value ползунка, мы выведем его в span с id="rangeInfo" внутри элемента label для ползунка.

<label for="myRange">Меняем координату блока 
<span id="rangeInfo" style="color: lightgreen">left: 0</span></label>

<input id="myRange" type="range" value="0" min="0" max="300" step="20" 
style="width: 180px; margin-bottom: 15px;">

<div id="myCircle" style="width: 100px; height: 100px; border-radius: 50%; margin: 15px; 
background: lightgreen; border: 3px double #57ff57; position: absolute; left:0;"></div>

<script>
 myRange.onchange = function(){
   myCircle.style.left = this.value +"px";
   rangeInfo.innerHTML = "left: "+ this.value +"px";
  }
</script>

<label for="myRange">Меняем координату блока

<input id="myRange" type="range" value="0" min="0" max="300" step="20"

style="width: 180px; margin-bottom: 15px;">

<div id="myCircle" style="width: 100px; height: 100px; border-radius: 50%; margin: 15px;

background: lightgreen; border: 3px double #57ff57; position: absolute; left:0;"></div>

myRange.onchange = function(){

myCircle.style.left = this.value +"px";

rangeInfo.innerHTML = "left: "+ this.value +"px";

}

</script>

Обратите внимание, что событие onchange наступает для ползунка и при прокрутке колесика мыши, но первоначально этот элемент должен получить фокус.

Меняем координату блока left: 0

Обработка события onchange для поля с типом checkbox

Для флажков (<input type="checkbox">) тоже можно обработать событие onchange. В примере ниже от Jon Kantner показано, как можно изменить внешний вид флажка, просто задав ему другой класс по событию onchange и использовав анимацию типа @keyframes.

See the Pen Pill Switch by Elen (@ambassador) on CodePen.

Автор: Админ

10 комментариев

NeznaykA 30 сентября, 2021

Здравствуйте Админ. У меня при обновлении выбранный пункт запоминается, тут проблем нет. Меня интересовал вопрос: возможно при выборе определенного пункта (например пункт 3) запомнить значение value (равное 19 как в вашем примере) в какую-то переменную, чтоб ее можно было вывести на странице или использовать в дальнейших расчетах..

Ответить
NeznaykA 21 сентября, 2021

писал вопрос, был на модерации, сейчас вообще его никак не видно. система комментариев работает или глюк?

Ответить
- Админ 21 сентября, 2021
  
  Добрый день.
  Ваш комментарий действительно был на модерации.
  Однако отвечать на него мгновенно нет возможности.
  
  Ответить

NeznaykA 20 сентября, 2021

select name="cat" class="select-wrapper"
option value="" Все категории option
option value="10" Пункт один option
option value="11" selected=selected Пункт два option
option value="15" Пункт три option
option value="19" Пункт четыре option
select
код не передался, надеюсь сейчас получится....

Ответить

Админ 21 сентября, 2021

По поводу вашего вопроса - код такой:

let cat = document.getElementById('cat'),
    selectedCat = localStorage.getItem('category');
if(selectedCat) cat.querySelector('option[value="'+selectedCat+'"]').selected = true;
cat.onchange = function(){ 
  localStorage.setItem('category', this.value)
}

let cat = document.getElementById('cat'),

selectedCat = localStorage.getItem('category');

if(selectedCat) cat.querySelector('option[value="'+selectedCat+'"]').selected = true;

cat.onchange = function(){

localStorage.setItem('category', this.value)

}

Посмотреть работающий пример можно по ссылке на codepen.io.
Запоминание выбранного меню реализуется за счет использования localStorage.
Однако, если я не ошибаюсь, вы используете этот код для выбора категорий WordPress. Если речь идет о создании настроек в Customizer, то обычно выбранный пункт система WP Customizer запоминает сама. Если же это выбор категорий в виджетах, советую посмотреть код одного из таких виджетов, например, тех же категорий, чтобы понять, как реализуется запоминание выбранного пункта средствами функций WordPress. Посмотрите информацию еще по этой ссылке.

Ответить

NeznaykA 20 сентября, 2021

Здравствуйте Админ.
Я не сильно разбираюсь в программировании, поэтому прошу посильной помощи. Возникла такая необходимость:
Есть выпадающий список, работает как мне надо, т.е. при обновлении страницы помнит выбранный option
Как можно вытащить значение value выбранного пункта и запомнить в переменной, чтобы ее можно было вставить в php запрос? Эта переменная - числовое значение - пока выбран соответствующий пункт не должна сбрасываться при обновлении страницы.
Заранее спасибо.

Все категории
Пункт один
Пункт два
Пункт три
Пункт четыре

Ответить

Никто 15 июня, 2021

Добрый день,подскажите пожалуйста,как реализовать такой пример :
У нас есть выпадающий список select и внутри него варианты с числами для Step, как сделать так чтобы при выборе цифры step менялся.
Спасибо за любую помощь)

Ответить

Админ 15 июня, 2021

Уважаемый Никто!
Интересный у вас ник. По поводу вашего вопроса: поскольку непонятно, что представляет собой Step, и как именно он должен меняться, то будем исходить из того, что Step - это <div id="step-block">, для которого нужно в тексте поменять цифру рядом с текстом Step + цвет этого текста.
Поэтому в <select name="stepSelect" id="stepSelect"> мы сделаем ряд элементов <option>, в которых в атрибуте value будет значение цвета, а в самом тексте - цифра.
Код, который будет приводить к изменениям в div-е при выборе разных цифр.

<div id="step-block" style="font-weight: bold; font-size: 25px; display: inline-block; margin: 10px">Step 1</div>
<form name="stepTest" class="test" style="display: inline-block">
	<select name="stepSelect" id="stepSelect">
 		<option value="black">1</option>
		<option value="green">2</option>
		<option value="blue">3</option>
		<option value="orange">4</option>
		<option value="red">5</option>
		<option value="limegreen">6</option>
		<option value="tomato">7</option>
	</select>
</form>
<script>
let stepBlock = document.getElementById('step-block'),
stepSelect = document.getElementById('stepSelect');
	stepSelect.addEventListener('change', function(){
		stepBlock.textContent = 'Step '+this.options[this.selectedIndex].text;
		stepBlock.style.color = this.value;
	});
</script>

</select>

</form>

let stepBlock = document.getElementById('step-block'),

stepSelect = document.getElementById('stepSelect');

stepSelect.addEventListener('change', function(){

stepBlock.textContent = 'Step '+this.options[this.selectedIndex].text;

stepBlock.style.color = this.value;

});

</script>

Ответить

Нико 6 июля, 2020

Добрый день,подскажите пожалуйста,как реализовать такой пример :
У нас есть выпадающий список select и внутри него варианты с числами и последний вариант "Выбрать другое", по нажатию на "Выбрать другое" под списком должен появиться инпут куда пользователь может ввести свой вариант.

Спасибо за любую помощь)

Ответить

Админ 6 июля, 2020

День добрый.
Достаточно просто. Использую атрибут hidden для того, чтобы скрывать input ниже списка.
Разметка:

<p>
    <select name="my-select" id="my-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="sometext">Выбрать другое</option>
    </select>
</p>
<p><input type="number" id="sometext" name="sometext" size="4" hidden></p>

<p>

<option value="sometext">Выбрать другое</option>

</select>

</p>

В скрипте идет привязка к id select-а и input-а, т.к. непонятно, нужна ли вам форма для отправки данных или просто для получения одного значения.

let mySelect = document.getElementById('my-select'), sometext = document.getElementById('sometext');
mySelect.onchange = function(){
    this.value == 'sometext'? sometext.removeAttribute('hidden'):sometext.setAttribute('hidden', true);
}

let mySelect = document.getElementById('my-select'), sometext = document.getElementById('sometext');

mySelect.onchange = function(){

this.value == 'sometext'? sometext.removeAttribute('hidden'):sometext.setAttribute('hidden', true);

}

Ответить

Обработка события onchange

Обработка события onchahge для текстовых полей

Обработка события onchahge для выпадающего списка

Обработка события onchahge для полей с типом number

Обработка события onchahge для полей с типом range

Обработка события onchange для поля с типом checkbox

Вам может понравиться

Генерируем случайный цвет в JS

Всплывающие (модальные) окна с помощью CSS, JavaScript и jQuery

Использование html-элемента dialog для создания модального окна

10 комментариев

Добавить комментарий Отменить ответ