英文:
Rename button by writing directly on the button using Vanilla Javascript?
问题
我已经创建了一个上下文菜单，当你右键单击一个按钮时会出现。在这个上下文菜单中有一个按钮，上面写着“rename”。我想要的是，当按下“rename”按钮时，打开上下文菜单的按钮会出现一个输入框，我可以在其中重命名原始按钮上的文本。例如，我右键单击名为“Awesome button”的按钮，按下“rename”，然后在“Awesome button”按钮上会出现一个输入框，上面写着“Awesome button”。当我将文本更改为“Best Button”并按下回车键时，输入框应该消失，按钮文本将被设置为“Best Button”，而不是“Awesome button”。是否有一种在纯JavaScript中实现这一操作的简洁方法？（无需jQuery等库）。
如果我提供的示例对你来说太复杂或写得不好，请理解：
我希望能够在按下另一个按钮时直接在按钮上写入以重命名按钮。
英文:
I have created a contex menu when you right click on a button. Inside this context menu is a button with the text "rename". What I want is when the "rename" button is pressed that the button that the contex menu was opened from gets an input where I can rename the button text that was originally on it. E.g. I right click on the button named "Awesome button", press "rename", and then I an input gets placed on the "Awesome button" button with the text "Awesome button". When I change the text to "Best Button" and press enter the input should disapear and the button text is set to "Best button" instead of "Awesome button". Is there a clean way of doing this in Vanilla Javascript? (No jQuery, etc).
If my example to too complex to understand or just poorly written in your opinion:
I want to be able to rename a button by writing DIRECTLY on it when another button is pressed.
答案1
得分: 0
你可以使用contenteditable，点击按钮后可以编辑其上的文本。
<button contenteditable>你好</button>
另一种方法是，你可以有一个重命名按钮，当你点击该按钮时，可以设置contenteditable为true或false。
英文:
You can use contenteditable, click on the button and you can edit the text on it
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<button contenteditable>Hello</button>
<!-- end snippet -->
Alternative approach
You can have rename button and when you click on that button you can make the contenteditable = true or false
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论