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

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

2017-11-23 / Вр:14:14 / просмотров: 14317

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

Вот список:

- убрать обводку при клике на поле формы;

- добавить обводку при наведении мишкой;

- изменить курсор мышки при наведении на input;

- убрать при клике на input текст подсказки;

- вывести данные из input в div (JavaScript);

- проверка поля input на ввод цифр.

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

Как убрать обводку при клике на input (поле формы)

Не знаю как вас, но меня дико раздражает, когда кликаешь мышкой по полю формы, и появляется обводка, которая реально портит весь дизайн полей. Как убрать обводку при клике на input (поле формы)

Давайте по порядку.
Вставьте для примера вот этот HTML код к себе на страничку:

<input ENGINE="text" value="Поиск...">

У вас появится поле формы с текстом «Поиск…». При клике на поле формы появится обводка.
Обводку можно убрать, если прописать в CSS вот такой код:

:focus
{
outline: 0;
outline-offset: 0;
}

Можно поменять и цвет обводки:

:focus
{
outline: 0;
outline-offset: 0;
color:red; /* цвет текста */
border:5px solid #f0ff05; /* цвет обводки */
}

Как добавить обводку при наведении мышки на input (поле формы)

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

Достаточно добавить CSS класс к тегу «input»:

<input type="text" value="Поиск..." class="bloggood">

И прописать в CSS вот такие стили к классу «bloggood»:

.bloggood:hover
{
border:1px solid #f0ff05; /* цвет обводки */
}

Чтобы форма красиво смотрелась, можно сделать вот так:

.bloggood
{
padding: 10px;
border:1px solid #ccc; /* цвет обводки */
}

.bloggood:hover
{
padding: 10px;
border:1px solid #f0ff05; /* цвет обводки */
}

Как изменить курсор мышки при наведении на input (поле формы)

Предлагаю вам почитать статью, которая посвящена именно теме «как изменить форму курсора мыши на сайте с помощью CSS», а я только покажу пример.

В HTML:

<input type="text" value="Поиск..." class="bloggood">

В CSS:

.bloggood:hover
{
cursor: pointer;
}

Как убрать при клике на input текст подсказки

В поле формы есть текст подсказка, например, «Ваше имя», «Ваш телефон», «Поиск…» и т.д.
При клике по форме подсказка исчезает, но если пользователь ничего не ввел, а перешел на другое поле, подсказка вернется. Пример вы можете посмотреть на моем сайте, там, где написано «поиск…»:

Как убрать при клике на input текст подсказки

Чтобы такое сделать, достаточно вставить код событий в поле input:

value="ТЕКСТ" onfocus="if (value == 'ТЕКСТ') {value = ''}" onblur="if (value == '') {value = 'ТЕКСТ'}"

Внимание: в коде я написал слово «ТЕКСТ», на его месте вставляете любое свое наименование поля. Только будьте внимательны, текст должен быть прописан с точностью одинаково:

<input type="text" value="Поиск..." onfocus="if (value == 'Поиск...') {value = ''}" onblur="if (value == '') {value = 'Поиск...'}">

(подробное разъяснение: если указали «Поиск…», то так и пишите! Если сделаете «Поиск» без сохранения троеточия, то код работать не будет.)

Такой эффект можно сделать, если в форме прописано вместо «value» атрибут «placeholder»:

<input type="text" placeholder="Ваше Имя" onfocus="if (placeholder == 'Ваше Имя') {placeholder = ''}" onblur="if (placeholder == '') {placeholder = 'Ваше Имя'}"/>

Как вывести данные из input в div (JavaScript)

В чем фишка? Фишка в том, что весь текст, который вы будете писать в поле input, сразу будет отображаться в блоке div с классом «result» без перезагрузки браузера, то есть в реальном времени.
Код нужно вставлять в таком порядке, как я вам скинул:

<input type="text" id="bloggood-ru">
<div id="result"></div>

<script>
var input = document.getElementById('bloggood-ru');
var result = document.getElementById('result');

input.onkeyup = input.oncopy = input.onpaste = input.oncut = (function() {
return function() {
result.innerHTML = this.value;
}
})();
</script>

Проверка поля input на ввод цифр (JavaScript)

Если хотите запретить ввод поля input буквами, а разрешить только ввод цифрами, то воспользуйтесь вот таким кодом:

HTML:

<input type="text" onkeyup="return proverka(this);" />

JS:

<script type="text/javascript">
function proverka(input) {
var value = input.value;
var rep = /[-\.;,":'a-zA-Zа-яА-Я]/;
if (rep.test(value)) {
value = value.replace(rep, '');
input.value = value;
}
}
</script>

Строка №4: «-\.;,":'a-zA-Zа-яА-Я» - это символы, которые вы хотите запретить для ввода в поле input. Список можете продолжить, если нужно.

Если хотите запретить только ввод цифр, тогда JS код будет вот таким (обратите внимание на строку №4):

<script type="text/javascript">
function proverka(input) {
var value = input.value;
var rep = /[0-9]/;
if (rep.test(value)) {
value = value.replace(rep, '');
input.value = value;
}
}
</script>

Все, я думаю этого пока достаточно для вас.