BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

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

HTML:

<input type="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>

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 781
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4278