Javascript：如何实现“输入/返回键”来保存值？答案

【问题标题】：Javascript: How to implement the "enter/return key" to save a value?Javascript：如何实现“输入/返回键”来保存值？
【发布时间】：2014-08-28 04:06:50
【问题描述】：

对不起，我不太擅长 JS。

代码本质上是用户双击文本，出现文本框，更改文本，并保存一个新值。但是，我希望用户也能够单击 Enter 以保存新值。

另外，如果可能的话，要有一个专门的“保存”按钮来保存新值，而“丢弃”来保留旧值。

另外，如果我多次双击，文本会显示为“(input type="text")”。有没有办法消除它？

如果可以的话，请帮忙。

HTML + JS 代码

<html>
<head>
    <script type="text/javascript">
        window.onload = function() {
            var elements = getElementsByClassName('text-edit', '*', document);
            for(var i = 0; i < elements.length; i++) {
                elements[i].ondblclick = function() {
                    this.setAttribute('oldText', this.innerHTML); // not actually required. I use this just in case you want to cancel and set the original text back.
                    var textBox = document.createElement('INPUT');
                    textBox.setAttribute('type', 'text');
                    textBox.value = this.innerHTML;
                    textBox.onblur = function() {
                        var newValue = this.value;
                        this.parentNode.innerHTML = newValue;
                    }

                    this.innerHTML = '';

                    this.appendChild(textBox);
                }
            }(i);
        }

        function getElementsByClassName(className, tag, elm) {
            var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
            var tag = tag || "*";
            var elm = elm || document;
            var elements = (tag == "*" && elm.all) ? elm.all : elm.getElementsByTagName(tag);
            var returnElements = [];
            var current;
            var length = elements.length;
            for(var i = 0; i < length; i++) {
                current = elements[i];
                if(testClass.test(current.className)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        }
    </script>
</head>
    <div><span class="text-edit">Some text</span></div>
</html>

【问题讨论】：

使用检查keyCode = 13的keyup处理程序。
有时从头开始编写比阅读别人的代码更容易；) 请在下面查看我的答案，如果您觉得它有用，请告诉我。
你为什么要重新发明轮子getElementsByClassName？支持 IE

标签： javascript textbox double-click textchanged

【解决方案1】：

下面的 sn-p 允许您使用 save 按钮或 enter 键修改文本框的值，并使用 cancel 按钮放弃任何更改。

<!-- HTML -->
<h1 id="editable">Lorem Ipsum</h1>

// JavaScript
window.onload = function(){
  var h1 = document.getElementById('editable');
  h1.onclick = function(){
    var old = this;
    var input = document.createElement("INPUT");
    input.type = "text";
    input.value = this.innerHTML;
    input.onkeyup = function(e){
      var code = (e.keyCode ? e.keyCode : e.which);
      if(code == 13) {
        old.innerHTML = input.value;
        input.parentNode.replaceChild(old, input);
        save.parentNode.removeChild(save);
        cancel.parentNode.removeChild(cancel);
      }      
    };    
    this.parentNode.replaceChild(input, this);
    var save = document.createElement("INPUT");
    save.type = "button";
    save.value = "Save";
    (function(old, input){
      save.onclick = function(){
        old.innerHTML = input.value;
        input.parentNode.replaceChild(old, input);
        this.parentNode.removeChild(this);
        cancel.parentNode.removeChild(cancel);
      };
    })(old, input);
    input.parentNode.insertBefore(save, input.nextSibling);
    var cancel = document.createElement("INPUT");
    cancel.type = "button";
    cancel.value = "Cancel";
    (function(old, input){
      cancel.onclick = function(){
        input.parentNode.replaceChild(old, input);
        this.parentNode.removeChild(this);
        save.parentNode.removeChild(save);
      };
    })(old, input);
    input.parentNode.insertBefore(cancel, input.nextSibling);
  };
};

Working jsBin

【讨论】：