0

キーイベントに関連付けられた文字の変更をシミュレートした「編集可能」のidを持つcontenteditable divがあります。ここで実際の動作を確認できます: http://jsfiddle.net/Ukkmu/66/

ご覧のとおり、ユーザーがどの英数字キーを押しても、"Singinme." という文字列が出力されます。divに入力します。var リスト内の単語間のスペースは無視されます。出力にスペースを含めて、「Sing in me」と読みたいと思います。現在、私のjavascriptコードの最初の行に書かれているためです。問題が insertTextAtCursor 関数にあることを少なくとも特定するための助けを得ましたが、その関数を変更して、許容される出力文字としてスペースを含めるにはどうすればよいですか? または、「Sing in me」と入力するように var リストを書き直すことはできますか。divで？

便宜上、以下にも JavaScript を貼り付けました。

PS: これはブラウザの問題であることがわかりました。Chromeでは、私が説明したとおりです。IE では、"Sing in me" のように動作します。スペース付き。これをChromeで機能させる方法はありますか? firefoxで動くかどうかはわかりません。

var list = "Sing in me.".split('');
function transformTypedCharacter(charStr) {
    return (/[a-zA-Z]/).test(charStr) ? list.shift()||" " : charStr;
}

function insertTextAtCursor(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);
    }
}


$("#editable").keypress(function(evt) {
    if (evt.which) {
        var charStr = String.fromCharCode(evt.which);
        var transformedChar = transformTypedCharacter(charStr);
        if (transformedChar != charStr) {
            insertTextAtCursor(transformedChar);
            return false;
        }
    }
});

</p>

4

2 に答える 2

2

Chrome は空白ノードを飲み込みます。複数のブラウザーが空白と空のノードを異なる方法で扱うように見えるため、これがバグかどうかはわかりません。

あなたの場合、単純な解決策は、代わりに改行なしのスペースを使用することです。それは：

var list = "Sign\xA0in\xA0me.".split("");

または

var list = "Sign in me.".replace(/\s/g, "\xA0").split("")
于 2012-10-26T17:55:11.600 に答える
1

これはスペースに関するものではありません。その解決策として、@Alexander's great responseを確認してください。これは、コード内の他の問題に関するものです。

まず、文字を一致a-zさせてA-Z入力するだけです。periodsのように、、、、、文字などspaceのキーストロークnumbersを置き換えません。non-ascii次に、配列をシフトする代わりに、入力内の位置で文字を探す必要があります。コードを使用すると、テキストを削除できますが、再度置き換えられることはありません。

function transformTypedCharacter(charStr) {
    var position = $("#editable").text().length;
    if (position >= list.length) return '';
    else return list[position];
}

それをアレクサンダーの答えと組み合わせると、家に帰って自由になります！

于 2012-10-26T17:47:56.100 に答える