Статьи

jQuery / HTML5 ввод фокуса и позиции курсора

Вот некоторые фрагменты кода и примеры того, как использовать jQuery и HTML5 для установки фокуса ввода курсора и позиций курсора, которые являются общими действиями с формами входа в систему и т.п. Комментарии, улучшения и предложения приветствуются.

Курсор-фокус

Фокус ввода jQuery

Просто вызовите функцию focus (), чтобы установить фокус на вход.

//set focus on input
$('input[name=firstName]').focus();

jsfiddle.net/z9Ldt/

Фокус ввода HTML5

Отличная функция, предоставляемая HTML5… Не удалось найти ее на http://html5please.com/, но я протестировал, что она работает в Chrome и Firefox, но не в IE9 или ниже.

 //AUTO INPUT FOCUS
<input type="text" name="myInput" autofocus />

jsfiddle.net/89PHL/

jQuery Установить положение курсора

Функция jQuery для установки позиции курсора на специфическую позицию символа в поле ввода.

 //SET CURSOR POSITION
$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

Пример использования

Устанавливает позицию курсора после первого символа.

 $('#username').setCursorPosition(1);

jsfiddle.net/tAZSs/

jQuery Установить положение курсора

Функция jQuery для автоматического выбора текста (определенного количества символов) в поле ввода.

 //SELECT TEXT RANGE
$.fn.selectRange = function(start, end) {
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Пример использования

Выбирает первые 5 символов на входе.

 $('#username').selectRange(0,5);

jsfiddle.net/yMUx5/