编辑按钮 onclick 的文本

Posted 2023-02-22

【中文标题】编辑按钮 onclick 的文本

【英文标题】：Edit text of button onclick

【发布时间】：2015-07-21 17:06:41

【问题描述】：

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

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

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

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

| - | Item Name - 1 | + |

或

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

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

【问题讨论】：

你能告诉我们你到目前为止做了什么吗？至少你的 html ！！

请向我们展示您的尝试。见what is a well-defined programming problem?。

【参考方案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;

【参考方案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/