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/

编辑按钮onclick的文本

2 个答案:

请参阅此fiddle