Можно ли прокручивать каретку в виде одного текстового поля HTML с помощью JavaScript?

Зная плагин jQuery Caret, я по-прежнему не вижу возможности сделать следующее в текстовом поле одной строки в HTML (т.е. input:type=text) с JavaScript:

Программная вставка текста в текстовое поле
Настройка каретки до конца.
Создание видимой видимости (т.е. прокрутка содержимого текстового поля)

Я знаю, как сделать 1. и 2., только для 3. Я не нашел способа сделать это.

Чтобы проиллюстрировать это:

Мой вопрос:

Можно ли каким-либо образом надевать каретку в конце текста и прокручивать его в виде?

(Я могу думать о симуляции нажатия клавиши END или что-то в этом роде, но я не уверен, что это лучший вариант).

Ответ 1

//взломать курсор в конце:

$(textboxselector).val($(textboxselector).val());

edit: следует сначала отметить фокус:

$(textboxselector).val(newtext);
$(textboxselector).focus();
$(textboxselector).val($(textboxselector).val());

Ответ 2

Вы можете попробовать запустить нажатие правой клавиши после фокуса.

$('#textbox').focus();
var e = jQuery.Event("keydown");
e.which = 39; // aka right arrow.
$("input").trigger(e);

Ответ 3

Он может не реализовать этот кросс-браузер. FireFox поддерживает метод KeyboardEvent.initKeyPress, который позволяет моделировать ключевые события.

См. комментарии к приведенной ниже функции для объяснения. Я успешно протестировал эту функцию в FireFox 3.6.22, 7.0.1 и Chrome 14.

Сама функция не зависит от модуля. Fiddle: http://jsfiddle.net/Jskbb/1/

/* @name caretAtEnd
 * @description Places caret at the end
 * @param elem  DOM element
 * @param focus boolean, optional. If true, the element will be focused.
 */
function caretAtEnd(elem, focus){
    var value = elem.value;

    //Add an extra character to the input field (necessary for this method)
    // An additional advantage is that the caret automatically moves to the end
    elem.value = elem.value + ".";

    try {
        // Create and simulate/trigger a [Backspace] keypress event.
        var evt = document.createEvent("KeyboardEvent");
        evt.initKeyEvent("keypress", 1, 1, null, 0, 0, 0, 0, 8, 0);
        elem.dispatchEvent(evt);
    } catch(e){
        //The current key event is not supported yet. Change back the value
        // In some browsers, the caret is at the end after executing this code.
        elem.value = value;
    }

    //Optionally, Focus on the element
    if(focus) elem.focus();
}

var element = $("#yourInputElement")[0]; //Important: Get the DOM element!
caretAtEnd(element);

Ответ 4

попытайтесь установить свойство scrollLeft для ввода, как:

input.scrollLeft = 10000;

Вы можете использовать scrollWidth, чтобы получить лучшее представление о конечном значении, но при использовании высокого уровня можно обеспечить правильность в большинстве случаев.

Ответ 5

Итак, с помощью справки Mark и Rob W мне наконец-то удалось ее решить.

Моя дополнительная проблема заключалась в том, что текстовое поле уже имеет фокус, который вышел, это проблема (я использую весь материал в OnClientItemSelected Ajax Toolkit AutoCompleteExtender).

Итак, мое решение:

<ajaxToolkit:AutoCompleteExtender 
    runat="server" 
    ID="EMailTextBoxControlAutoCompleteExtender" 

    ...

    OnClientItemSelected="function() { 
        // Read current text and append some string.
        var tbSel = '#EMailTextBoxControl';
        var newText = $(tbSel).val() + ', ';

        // Since we already have the focus, 
        // remove it and set it to another control.
        $('#AdditionalRemarksControl').focus();

        // https://stackoverflow.com/questions/7892902/7903519#7903519
        $(tbSel).val(newText);
        $(tbSel).focus();
        $(tbSel).val($(tbSel).val());
    }">

Он успешно работает в Google Chrome, Firefox и Internet Explorer 9. Надеюсь, он также работает и в других браузерах.

Я отмечаю комментарий в качестве ответа.

Ответ 6

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

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
   setTimeout(function(){
        var pos = $(el).offset().top + $(el).height();
        $('html, body').animate({
            scrollTop: pos
        }, 1000);
    },100);
}

moveCaretToEnd(document.getElementById("replyBox"));

Поместите каретку в конец, а затем плавно прокрутите окно до нижней части.