编辑按钮 onclick 的文本

Question

我想做的是让按钮的文本在单击时可编辑。

我了解如何将值更改为硬编码的值，但我想要的是......

• 点击按钮，会出现一个字段。
• 此字段可让您输入按钮的新名称。
• 提交字段后，按钮的文本将更改为字段值。

目标是一个按钮，该按钮具有可编辑的文本值，而其他按钮则增加与字段数量相关的数字值。

| - | Item Name - 1 | + |

或

[subtraction button] | Name of Item - # of item | [addition button]

非常感谢您的帮助和时间。

Answer 1

看到这个fiddle

我所做的是，我将获取输入字段中输入的文本，并使用它在按钮的 onClick 事件中设置按钮的文本。

HTML

<input type="text" id="btn_text" />
<button onclick="myFunction()" id="btn">Click me</button>

JS

function myFunction() {
    document.getElementById("btn").innerHTML = document.getElementById("btn_text").value;
}

Answer 2

您是否编写了代码？您可以发布它，但如果没有，您可以执行以下操作：

jQuery

$("button").click(function(e) {
    e.preventDefault();
    $("input").show();
});
$("input").blur(function() {
    $("button").text($(this).val());
    $(this).val("");
    $(this).hide();
});

还是要你一个纯js

var bt = document.getElementsByTagName("button")[0];
var input = document.getElementsByTagName("input")[0];
bt.addEventListener("click", function() {
    input.style.display = "inline";
});
input.addEventListener("blur", function() {
    bt.innerText = this.value;
    this.style.display = "none";
    this.value = "";
});

html

<button>Click me</button>
<input type="text" style="display:none">

使用 jQuery 的演示： http://jsfiddle.net/x8714jgk/

使用纯 Js 的演示： http://jsfiddle.net/x8714jgk/1/