Question

这应该很简单，但我无法弄清楚。

我想让用户编辑一个值。为此，单击时，值将更改为文本框。但是，如果用户在文本框中的用户输入中放置引号，则文本框的value=""属性会过早关闭，引号和其后的任何内容都会丢失。 Escape（不建议使用）和encodeURI只是用asci替换引号，这在文本框中看起来不太好。

非常感谢任何人解决这个问题的方法：

这是javascript：

function editText() {
var text = document.getElementById('text').innerHTML;
var edittext = '<input type="text" size=60 name="name" id="name" value="'+text+'"><input type="button" value="Save" onclick="storeText(\'name\');">';
document.getElementById('text').innerHTML = edittext
return false;
}

HTML：

Text: <span id="text" onclick="editText()";>He said "that's cool"</span>

的jsfiddle

http://jsfiddle.net/2s9v2/6/

更新：

与那些将此标记为重复的人相反，重复的问题并未提供我的问题的答案。他们可能想重新阅读我的问题和所谓的重复，并在我的问题中心理注册单词"programmatic"，并实际查看重复代码的代码，这里代码....只是说。 / p>

我最终将文本框更改为textarea作为解决方法，因为似乎没有一种直接的方式以编程方式转义文本框中的引用。

以下Merlin的答案是一种可能的方法，但调用第二个函数比用textarea替换textbox更复杂。在任何情况下，我都无法让它工作，但我感谢Merlin的回答并对其进行了投票。

Answer 1

为什么不直接设置值而不是重建input？

document.getElementById('name').value = edittext

当然，这假设您的DOM中已存在input id=name元素，但我认为没有特别的原因您无法确保它已经存在（直接用HTML编写或在页面加载时在Javascript中生成。）

更新：通过将当前位于onClick的文本转换为{{}，OP似乎希望在div中动态创建该元素1}}字段，其input的内容为div。

我相信以下可能会成功，假设value是唯一的，应该是。

id

请注意，您还需要在上面的函数中禁用function editText() { var text = document.getElementById('text').innerHTML; var edittext = '<input type="text" size=60 name="name" id="name" value="" /><input type="button" value="Save" onclick="storeText(\'name\');">'; document.getElementById('text').innerHTML = edittext; document.getElementById('name').value = text; document.getElementById('text').onclick = function() {}; // return false; }，然后在onClick内重新启用它，否则每次点击都会导致添加额外的按钮。

更新2 ：这是一个没有参数传递的完整工作示例（为简单起见）。

storeText

Answer 2

尝试：text.replace(/"/g,""")

但理想情况下，您应该使用createElement创建元素，此时您可以执行elem.value = text而无需转义。

如何以编程方式逃避报价？

2 个答案: