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

对不起，我对JS不太好。Javascript：如何实现“输入/返回键”来保存一个值？

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

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

此外，如果我多次双击，文本显示为“（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>

来源

2014-08-28 umtek123

使用'keyup'处理程序，用于检查'键代码= 13'。 – Barmar 2014-08-28 04:14:02

有时，从头开始编写比读别人的代码更容易;）检查下面的答案，并让我知道你是否觉得它有用。 – hex494D49 2014-08-28 04:43:21

为什么重新发明'getElementsByClassName'？支持IE <9？ – 2014-08-28 04:50:48

以下代码段，可以修改使用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

来源

2014-08-28 04:40:05 hex494D49

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

回答

相关问题