0

私はjs開発が初めてです。次のコードがあります。

<html>
<body>

<div><span id="inline">Click here to start editing</span></div>

<script>
    var inline = document.getElementById("inline");     
    inline.onclick = function() {           
        if (!inline.editable) {
            var text = inline.innerText;
            inline.innerHTML = "<input type='text' id='inline-editable'>";
            inline.editable = true;
            var inline_editable = document.getElementById("inline-editable");
            inline_editable.value = text;

            inline_editable.onblur = function() {
                var value = inline_editable.value;                  
                inline.editable = false;
                inline.innerHTML = value;
            }

            inline_editable.onkeypress = function(event) {
                if (event.keyCode == 13) {
                    inline_editable.onblur();
                }
            }               
        }
    }
</script>
</body>

</html>

内部spanにテキストが表示され、インライン編集が可能になります。ちょうどイベント内で編集を終了するとonblur、完全に正常に動作します。しかし、Enter で編集を終了し、同じハンドラーを使用したい場合、次のNotFoundError: DOM Exception 8行でエラーが発生します。

inline.innerHTML = value;

それにもかかわらず、すべてが期待どおりに機能します。誰でもこのエラーを回避するのを手伝ってもらえますか?

イベント処理が終了していない状態で要素を破棄inline-editableして、呼び出したいと思ったために発生したと思いonchangeます。代わりに、常に 2 つのコントロールを使用して可視性を切り替える必要がありますか?

4

1 に答える 1