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：如何實現「輸入/返回鍵」來保存一個值？

回答

相關問題