Javascript:如何实现;输入/返回键”;以保存值

Javascript: How to implement the "enter/return key" to save a value?

本文关键字：返回 保存 输入 Javascript 何实现 实现      更新时间：2023-09-26

对不起，我对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>

下面的代码段允许您使用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);
  };
};

工作jsBin

相关文章：