Question

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

在某些情况下，它相当容易（至少到目前为止）。我创建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>

不幸的是在fires之前的onclick，否则我可能会停止传输事件，如果点击其他输入并且问题将得到解决。但事实并非如此。我该如何解决？

在多个输入元素的情况下替换onblur

0 个答案: