Главная » Вебмастеру » Несколько интересных трюков для тега input №2

Несколько интересных трюков для тега input №2

2017-12-07 / Вр:13:40 / просмотров: 3980

Понравилась мне эта тема, и решил продолжить статью «Несколько интересных трюков для тега input».
Итак, что же я хочу вам предложить?
Вот список того, что вы найдете в этой статье:

- Как сделать, чтобы стрелочки в INPUT оставались изначально
- Как убрать стрелочки в INPUT
- Как вывести подготовленные рекомендуемые варианты для поля INPUT
- Как запретить изменять значение для поля INPUT, но разрешить выделять и копировать
- При клике на INPUT radio появится сообщение

Как сделать, чтобы стрелочки в INPUT оставались изначально

При наведении курсора мыши на поле INPUT появляются стрелочки для цифр. Как сделать, чтобы стрелочки оставались изначально и не куда не пропадали, если курсор мыши забрать.

Как сделать, чтобы стрелочки в INPUT оставались изначально

HTML:

<input ENGINE="number" id="myINPUT"/>

CSS:

#myINPUT::-webkit-inner-spin-button
{
opacity: 1;
}

Как убрать стрелочки в INPUT

Если вам нужно вообще убрать стрелочки с поля INPUT, можете воспользоваться вот таким кодом:

HTML:

<input type="number" id="myINPUT"/>

CSS:

#myINPUT::-webkit-inner-spin-button
{
-moz-appearance: textfield;
}

#myINPUT::-webkit-inner-spin-button {
display: none;
}

Как вывести подготовленные рекомендуемые варианты для поля INPUT

По мере совпадения символов при вводе в поле INPUT будут появляться подготовлены вами варианты.

HTML:

<form>
<input list="myINPUT" type="text">
<datalist id="myINPUT">
<option>Степа</option>
<option>Саша</option>
<option>Сергей</option>
<option>Оля</option>
<option>Таня</option>
<option>Маша</option>
</datalist>
</form>

Попробуйте в поле ввести имя «Степа».

Как вывести подготовленные рекомендуемые варианты для поля INPUT Я думаю, вы поняли, что для того, чтобы продлить список, нужно добавить между тегами <datalist></datalist> свой вариант:

<option>ВАШ ВАРИАНТ</option>

Как запретить изменять значение для поля INPUT, но разрешить выделять и копировать

В чем фишка? Значение, которое выведено в поле не может изменяться пользователями, но его можно выделять и копировать.

HTML:

<input type="number" readonly value="120"/>

Как вы уже заметили, я добавил «readonly» для тега «INPUT».

А можно вместо «readonly» прописать «disabled», таким образом, поле будет не активным и закрашенным серым цветом, пользователь не сможет менять данные и значения, которые находятся в «value» отправляться не будут.

<input type="number" disabled value="120"/>

При клике на INPUT radio появится сообщение

Можно вывести сообщение, если выберите INPUT radio:

<input type="radio" name="BlogGood_ru" > BlogGood.ru <br><br>
<output id="rezultat">Выберите хоть что-то!!! :)</output>

JS:

<script>
document.addEventListener('change', function () {
var chk = event.target

if (chk.tagName === 'INPUT' && chk.type === 'radio') {
document.getElementById('rezultat').innerHTML = 'Отлично, вы сделали свой выбор!!!';
}
})
</script>

Вот и все!
Если статья была интересная, подписывайся на обновления блога.