私は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 つのコントロールを使用して可視性を切り替える必要がありますか?