javascript умолчанию - Установить положение каретки в текстовом поле html




оформление input (7)

Кто-нибудь знает, как переместить курсор клавиатуры в текстовое поле на определенную позицию?

Например, если текстовое поле (например, элемент ввода, а не текстовая область) имеет в нем 50 символов, и я хочу поместить каретку перед символом 20, как бы я это сделал?

Это в отличие от этого вопроса: jQuery Установить положение курсора в текстовой области , для чего требуется jQuery.


Answers

function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }

Я немного скорректировал ответ kd7, потому что elem.selectionStart будет оценивать значение false, когда selectStart случайно 0.

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}

Ссылка в ответе сломана, этот должен работать (все кредиты идут на blog.vishalon.net ):

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

В случае, если код снова потерян, вот две основные функции:

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}


function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}

Если вам нужно сфокусировать текстовое поле, и ваша единственная проблема в том, что весь текст будет выделен, тогда как вы хотите, чтобы каретка была в конце, тогда в этом конкретном случае вы можете использовать этот трюк для установки значения текстового поля для себя после фокуса:

$("#myinputfield").focus().val($("#myinputfield").val());

Поскольку на самом деле я действительно нуждался в этом решении, и типичное базовое решение ( фокус ввода - тогда установить значение, равное самому себе ) не работает кросс-браузер , я потратил некоторое время на настройку и редактирование всего, чтобы заставить его работать. На основе кода @ kd7 вот что я придумал.

Наслаждайтесь! Работает в IE6 +, Firefox, Chrome, Safari, Opera

Методика позиционирования с помощью браузера (пример: перемещение курсора к END)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

Мясо и картофель - это в основном набор @ Cd7 setCaretPosition, с самым большим изменением, if (el.selectionStart || el.selectionStart === 0) , в firefox значение if (el.selectionStart || el.selectionStart === 0) начинается с 0 , что в булевом курсе, конечно, обращается к Ложно, так что он ломался.

В хроме самая большая проблема заключалась в том, что просто дать ему .focus() было недостаточно (он продолжал выбирать ВСЕ текст!) Следовательно, мы устанавливаем значение самого себя, себе el.value = el.value; перед вызовом нашей функции, и теперь у нее есть захват и позиция с помощью ввода для использования selectionStart .

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Выдержка из позиции настройки клавиатуры Josh Stodola в текстовом поле или TextArea с Javascript

Общая функция, которая позволит вам вставить каретку в любую позицию текстового поля или текстового поля, которое вы хотите:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Первый ожидаемый параметр - это идентификатор элемента, который вы хотите вставить в каретку клавиатуры. Если элемент не может быть найден, ничего не произойдет (очевидно). Второй параметр - индекс позиционирования каретки. Zero поместит клавиатуру в начало. Если вы передадите число, большее, чем количество символов в значении элементов, оно положит каретку клавиатуры в конец.

Протестировано на IE6 и выше, Firefox 2, Opera 8, Netscape 9, SeaMonkey и Safari. К сожалению, в Safari он не работает в сочетании с событием onfocus).

Пример использования вышеуказанной функции, чтобы заставить каретку клавиатуры перейти к концу всех текстовых областей на странице, когда они получают фокус:

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

Я настоятельно рекомендую соблюдать особую осторожность при использовании значений параметров по умолчанию в javascript. Он часто создает ошибки при использовании в сочетании с функциями более высокого порядка, такими как forEach , map и reduce . Например, рассмотрим эту строку кода:

['1', '2', '3'].map(parseInt); // [1, NaN, NaN]

parseInt имеет необязательную вторую function parseInt(s, [ radix =10]) но отображает вызовы parseInt с тремя аргументами: ( элемент , индекс и массив ).

Я предлагаю вам разделить ваши требуемые параметры с вашими необязательными / стандартными аргументами. Если ваша функция занимает 1,2 или 3 требуемых параметра, для которых значение по умолчанию не имеет смысла, сделайте им позиционные параметры для функции, любые необязательные параметры должны следовать как именованные атрибуты одного объекта. Если ваша функция занимает 4 или более, возможно, имеет смысл передавать все аргументы через атрибуты одного параметра объекта.

В вашем случае я предлагаю вам написать функцию deleteFile следующим образом:

// unsafe
function read_file(fileName, deleteAfter=false) {
    if (deleteAfter) {
        console.log(`Reading and then deleting ${fileName}`);
    } else {
        console.log(`Just reading ${fileName}`);
    }
}

// better
function readFile(fileName, options={}) {
  const { deleteAfter = false } = options || {}; // if null
  read_file(fileName, deleteAfter);
}

console.log('unsafe...');
['log1.txt', 'log2.txt', 'log3.txt'].map(read_file);

console.log('better...');
['log1.txt', 'log2.txt', 'log3.txt'].map(readFile);

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







javascript textbox input