4

「タグ」の選択を含む div をクリックしてメタ コンテンツを追加するテキスト入力ボックスのアイデアをいじっています。テキスト入力の幅は 35 ですが、オーバーフローできるようにしたいと考えています。

更新された入力コンテンツの最後にキャレットをフォーカスして配置する方法を検索して見つけました.chromeとIEはそれ自体で動作し、自動スクロールして入力ボックスの表示領域にカーソルを表示しますが、テキスト入力がフルとオーバーフロー Firefox 3.0.7 では、正しく配置されたキャレットが右側に表示されません (ただし、キーボードの右矢印を押すと、位置を乱さずにキャレットにアクセスできます)。

どんな助けでも感謝します。

4

3 に答える 3

1

FireFox のテキストエリア内の選択範囲へのスクロールで同様の問題が発生していました。「スペース」を送信してから「バックスペース」文字を送信できませんでした。これは、テキストエリアの選択を上書きするためです。そのため、選択した直後に文字を仮想的に再入力して、選択を強制的に表示するより良い方法を見つけました。

コードは次のとおりです。

function setSelRange(inputEl, selStart, selEnd) { 
     if (inputEl.createTextRange) {
        var range = inputEl.createTextRange(); 
        range.collapse(true); 
        range.moveEnd('character', selEnd); 
        range.moveStart('character', selStart); 
        range.select(); 
        //range.scrollIntoView();
    } else if (inputEl.setSelectionRange) {
        inputEl.focus(); 
        inputEl.setSelectionRange(selEnd, selEnd + 1);
        // ---- Firefox Workaround ----
        // Send a virtual key, which is the character immediately after the 
        // selected text. It justs rewrites the same character so that no unnecessary changes
        // are made to the content.
        // When the selection is at the end of the textarea, an extra space is appended
        // because the inputEl.value.charCodeAt(selEnd) would otherwise cause an error.
        var evt = document.createEvent("KeyboardEvent");
        if (inputEl.value.length == selEnd) {
            evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
        } else {
            evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, inputEl.value.charCodeAt(selEnd));
        }
        inputEl.dispatchEvent(evt);
        inputEl.setSelectionRange(selStart, selEnd);

    } 
}

これがこれを探していた人に役立つことを願っています。私はこれを理解しようとして多くの時間を無駄にしました。

于 2009-09-23T23:24:11.053 に答える
0

ありがとう、それは私のために働くjtompson。それを既存のスクリプトと組み合わせて、キャレットをtextinputまたはtextareaの最後に移動すると、IE7、FF3、およびchromeがカバーされるようです。

    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.setSelectionRange(caretPos, caretPos);
                elem.focus();
                // Workaround for FF overflow no scroll problem
                // Trigger a "space" keypress.
                var evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
                elem.dispatchEvent(evt);
                // Trigger a "backspace" keypress.
                evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
                elem.dispatchEvent(evt);
            }
            else
                elem.focus();
        }
    }
}
 setCaretPosition(document.getElementById("searchinput").id, document.getElementById("searchinput").value.length);
于 2009-03-28T10:37:31.660 に答える