0

contenteditable divが3つあります。1 番目と 3 番目の div には、キー イベントに関連付けられた文字の変更をシミュレートする関数があり、ユーザーが入力すると事前にプログラムされた文字列が入力されます。2 番目の div は単純で、ユーザーが入力したものが div に表示されます。これはhttp://jsfiddle.net/vRXph/4/で確認できます。便宜上、最初の div のコードをここに含めました。

var list1 = "Sing in me, Muse, and through me tell the story".replace(/\s/g,
 "\xA0").split("")
function transformTypedCharacter1(charStr) {
    var position = $("#verse1").text().length;
    if (position >= list1.length) return '';
    else return list1[position];
}

function insertTextAtCursor1(text) {
    var sel, range, textNode;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            range.deleteContents();
            textNode = document.createTextNode(text);
            range.insertNode(textNode);

            // Move caret to the end of the newly inserted text node
            range.setStart(textNode, textNode.length);
            range.setEnd(textNode, textNode.length);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.pasteHTML(text);
    }
}


$("#verse1").keypress(function(evt) {
    if (evt.which) {
        var charStr = String.fromCharCode(evt.which);
        var transformedChar = transformTypedCharacter1(charStr);
        if (transformedChar != charStr) {
            insertTextAtCursor1(transformedChar);
            evt.preventDefault();
            return false;
        }
    }
});

これらのdivの間で自動タブを作成したい。最初の div では、事前にプログラムされた最後の文字が入力された後に autotab 関数が呼び出され、2 番目の div では、autotab は一定数の文字 (5 文字としましょう。テスト）。

私の最初の質問 (3 つのうち): contenteditable div 間で autotab を実行するにはどうすればよいですか?
入力タイプ間で自動タブを作成する方法を見つけました: ここのテキスト フィールド: http://jsfiddle.net/Ukkmu/73/しかし、これを div に適用できないようです。ここでこれを実行しようとしましたが、失敗しました: http://jsfiddle.net/Ukkmu/76/。 

    function auTab (currentDiv, currentDivSize, currentDivLength, nextDiv) {
    if(currentDivSize == currentDivLength){
        $('#' + currentDiv).next().focus();
    };
};

$('div[id^="verse"]').keyup(function() {
    var thisDiv = $(this).attr('id');
    var thisDivSize = $(this).attr('size');
    var thisDivLength = $(this).val().length;

    auTab(thisDiv, thisDivSize, thisDivLength);
});

ご覧のとおり、システムは autotab 関数を無視しています。テストとして、最初の div に「5」のサイズを作成しました。これが可能かどうかはわかりませんが、オートタブ機能がサイズに依存することがわかったので、そうしました。私の 2 番目の質問 (3 つのうち) は、次のとおりです。 size または maxlength 属性を contenteditable div に割り当てることはできますか? 可能であれば、自動タブがこの属性に依存している場合は、最初の div のサイズを事前にプログラムされた文字列の文字数に割り当てるだけです (2 番目の div には、テストとして 5 文字を割り当てます。私が上で述べたように）。

別の方法は、contenteditable div を入力タイプ: テキスト フィールドに変更することです。http://jsfiddle.net/Ukkmu/74/でこれを行いましたが、ご覧のとおり、この質問の最初の段落で説明した元の関数は機能しなくなりました。最初のフィールドに事前にプログラムされた文字列ではなく、最初のフィールドの前に繰り返し文字 (事前にプログラムされた文字列の「S」)が表示されます。このテストでは、テストとして、フィールドのサイズを 3 に設定しました。最終的なバージョンは、事前にプログラムされた文字列全体のサイズになります。私の 3 番目の質問 (3 つのうち)、該当する場合: キーに関連付けられた文字の変更をシミュレートする関数を入力タイプ = テキスト フィールドに適用するにはどうすればよいですか?

このコードの私の適用は、これがアート プロジェクトであるということです。ユーザーが入力すると、画面上の出力は、従来のテキスト (この場合はホーマーのThe Odyssey ) と、ユーザーが実際に入力している内容との間で交互に表示されます。

これが非常に長い投稿である場合は申し訳ありませんが、できるだけ多くの情報を含めたかった.

4

1 に答える 1

0

私の解決策は、pckill のおかげで、質問 3 に答えます。次の関数で入力タイプ: テキスト フィールドを使用しました。

var list1 = "This is a test.".replace(/\s/g, "\xA0").split("")
function transformTypedChar1(charStr) {
    var position = $("#verse1").val().length;
    if (position >= list1.length) return '';
    else return list1[position];
}
于 2012-11-01T01:17:16.073 に答える