0

我有一个带有一些文本结构的网页。我希望该结构能够以“就地”方式进行编辑。

在某些情况下，这相当容易（至少到目前为止）。我制作了在文本上onclick设置的事件display: none并创建了一个输入。然后我设置了一些事件来使用 AJAX 保存新内容。有问题的是取消版本。在这里，我将使用onblur触发删除<input>字段并使文本再次可见的事件来实现。

HTML 示例 1：

<div class="text_bar">
    <div class="text" onclick="edit(this.parentNode)"></div>
</div>

JS片段：

function edit(parentElement){

    function cancelEditing(){
        textInput.onblur = null // for Chrome
        textInput.parentNode.removeChild(textInput)
        text.style.display = 'inline-block'
    }

    var text = parentElement.getElementsByClassName('text')[0]

    var textInput = document.createElement('input')
    textInput.setAttribute('type','text')
    textInput.value = text.textContent
    textInput.onkeydown = function(event){
        /* not that important */
    }
    textInput.onblur = cancelEditing

    text.style.display = 'none';
    parentElement.insertBefore(textInput, text.nextElementSibling)
    textInput.focus()

}

然而，在某些情况下，两个文本密切相关。所以我想展示两个<input>元素，问题在于取消。我希望用户能够在输入之间自由切换（使用鼠标或键盘），但如果用户点击其他地方，字段需要关闭。

HTML 示例 2：

<div class="text_bar">
    <div class="prefix" onclick="edit(this.parentNode)"></div>
    <div class="text" onclick="edit(this.parentNode)"></div>
</div>

不幸的是 onblur firesbefore onclick，否则如果单击其他输入并且问题将得到解决，我可以例如停止传输事件。但事实并非如此。我该如何解决？

4

0 回答 0