JS/jQuery

Работа с Input Text jQuery

Сборник приемов jQuery для работы с текстовыми полями. Во всех примерах используется следующий HTML код:

<input id="text" type="text" name="form-text">

А jQuery связывается с ним по атрибуту id="text" (селектор #text).

1

Получить содержимое текстового поля

$('#text').val();
// или
$('#text').attr('value');
2

Добавить значение в текстовое поле

$('#text').val('Новый текст');

Добавить текст перед и после значения

// Добавить текст в начало
$('#text').val('before ' + $('#text').val());

// Добавить текст в конец
$('#text').val($('#text').val() + ' after');
3

Очистить поле

$('#text').val('');
4

Удалить поле

Метод remove() удаляет элементы из DOM включая дочерние.

$('#text').remove();
5

Добавить/удалить CSS класс

Метод addClass() добавляет в атрибут class="" значение, а removeClass() удаляет его. 

Метод toggleClass() работает как переключатель, при первом вызове, если у элемента нет такого класса то добавляет, при повторном удаляет его.

// Добавить класс
$('#text').addClass('active');

// Удалить класс
$('#text').removeClass('active');

// Переключить класс
$('#text').toggleClass('active');
6

Фокусировка

Установить фокус

$('#text').focus();

События при смене фокуса

// Событие когда элемент получил фокус
$('#text').focus(function(){
    alert('Фокус установлен');
});

// Когда элемент теряет фокус
$('#text').blur(function(){
    alert('Фокус снят');
});
7

Выделение всего текста при клике на input

$('#text').focus(function(){
    $(this).select();
});
8

Заблокировать и разблокировать input

// Заблокировать
$('#text').prop('disabled', true);

// Разблокировать
$('#text').prop('disabled', false);
9

Подсчет количества символов

<input id="text" type="text">
<p id="result">0</p>

<script>
$('#text').bind('input', function(){
    $('#result').html($(this).val().length);
});
</script>
10

Принудительный регистр вводимого текста

// Строчные
$('#text-1').bind('input', function(){
    $(this).val($(this).val().toLowerCase());
});

// Заглавные
$('#text-2').bind('input', function(){
    $(this).val($(this).val().toUpperCase());
});
11

Запретить копировать, вырезать и вставлять

$('#text').bind('cut copy paste', function(e) {
    e.preventDefault();
});
12

Отправить значение через ajax

В примере при каждом изменении поля <input id="text" type="text"> его значение отправляется методом POST на ajax.php.

$('#text').bind('input', function(){
    $.ajax({
        url: '/ajax.php', 
        method: 'post',
        dataType: 'html',
        data: {text: $('#text').val()},
        success: function(data){
            $('#result').html(data);
        }
    });
});
02 февраля 2018
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...