Как переместить окно просмотра текстового поля при получении фокуса?

Question

У меня есть текстовое поле, которое может содержать строки больше, чем размер текстового поля. Когда я печатаю, текстовое поле «область просмотра» всегда перемещается, чтобы показать последний набранный мной символ (например, когда вы пишете очень большой заголовок в SO вопросе). а

Проблема в том, что если texbox теряет фокус, когда он снова фокусируется, область просмотра всегда устанавливается в начале текста, и я хочу его в конце.

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

Пример

Это текстовое поле перед потерей фокуса:

альтернативный текст http://img35.imageshack.us/img35/6697/10437837.jpg

И это после того, как фокус потерян:

альтернативный текст http://img11.imageshack.us/img11/1390/33816597.jpg

Мне бы хотелось, чтобы, когда txtbox снова фокусировался, область просмотра была установлена, как на первом изображении.

Возможно ли это сделать?

Answer 1

Извините, но я не думаю, что это возможно. По крайней мере, не в чистом и согласованном с браузером виде.

Answer 2

Я чувствую, что, возможно, неправильно прочитал вопрос после прочтения других ответов, рассказывающих о взломах и тому подобном, но я собрал быстрый пример, который отлично работает в IE8 и Firefox 3.5.2. Предполагая, что входной элемент с id = "Test" и вызывая следующую функцию onfocus:

function TestFocus()
{
    var Test = document.getElementById("Test");
    if (document.selection)
    {
            var SEnd = document.selection.createRange();
            SEnd.moveStart("character", Test.value.length);
            SEnd.select();
    }
    else if (Test.setSelectionRange)
    {
        Test.setSelectionRange(Test.value.length, Test.value.length);

        //- Firefox work around, insert a character then delete it
        var CEvent = document.createEvent("KeyboardEvent");
        if (CEvent.initKeyEvent)
        {
            CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
            Test.dispatchEvent(CEvent);
            CEvent = document.createEvent("KeyboardEvent");
            CEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
            Test.dispatchEvent(CEvent);
        }
    }
    //- The following line works for Chrome, but I'm not sure how to set the caret position
    Test.scrollLeft = Test.scrollWidth;
}

В Firefox он использует initKeyEvent для отправки клавиши пробела, а затем сразу после нее клавишу возврата. В Chrome я не уверен, как установить каретку до конца, но настройка scrollLeft на входе почти работает, может быть, вы можете немного поиграть с этим? Что касается оперы, я понятия не имею. Я, конечно, надеюсь, что это поможет вам на вашем пути.

Answer 3

Хорошо, вы боретесь с ограничениями браузера и событий здесь.

Вы не можете смоделировать событие пользовательского интерфейса таким образом, чтобы оно имитировало взаимодействие с человеком (это проблема безопасности). Тем не менее, существуют определенные встроенные способы манипулирования контролем над текстом в нескольких элементах DOM. Элемент textarea является хорошим примером этого с его переменными selectionStart / selectionEnd ( реализация для браузера ). Вы, вероятно, должны заметить, что в Firefox selectionStart / selectionEnd дают желаемый эффект, но, опять же, только в Firefox.

Итак, ваша проблема не может быть решена кросс-браузерным способом. Вам нужно будет перейти к моделированию эффекта с помощью нарезки текста и т. Д.

Вот быстрый псевдокод пример того, что я имею в виду:

element.onblur = function (event) {
    this.hidden = this.value;
    if (this.value.length > (this.offsetsetWidth / 12)) {
        this.shown = this.value.slice(this.value.length - (this.offsetWidth / 12));
        this.value = this.shown;
    }
};

element.onfocus = function (event) {
    this.value = this.hidden || this.value;
};

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

Если длина значения на входе составляет 24 символа, мы делаем простую математическую операцию, чтобы нарезать (24 - (w / 12)) -ю позицию в строке.

Это все взлом - И, честно говоря, есть ли практическое применение этому? Возможно, вам следует добавить некоторый подтекст под вводом, который дает предварительный просмотр последней части текста в виде многоточия.

Answer 4

установить свойство text-align css текстового поля на выравнивание по правому краю при потере фокуса.

с mootools:

$('#yourtextboxid').setStyle('text-align', 'right');

Answer 5

Один из возможных способов - это динамически перезагружать текстовое поле после потери фокуса.

Просто сохраните строку в переменной и удалите текстовое поле, а затем добавьте его обратно с помощью $ .html () или любого другого метода, который вам нравится, со строкой в ​​нем.

Простой, работает во всех браузерах, но немного хакерский.