如何将文本转换为输入？ [关闭]答案

【问题标题】：How to transform text to input? [closed]如何将文本转换为输入？ [关闭]
【发布时间】：2011-09-27 08:12:16
【问题描述】：

如何创建诸如：
- 有一些文字
- 我点击它
- 它转换为包含我单击的文本的输入。

【问题讨论】：

你的英语还不错。

标签： javascript text transform helpers textinput

【解决方案1】：

这样的事情怎么样

HTML

<div onclick="transform(this)">Some text here</div>

Javascript

function transform(obj)
{
    obj.innerHTML = "<input type='text' value='" + obj.innerHTML + "' />";
}

希望我正确理解了您的问题。

【讨论】：

它不起作用。我试过了：/

【解决方案2】：

<a href="#" onclick="var input = document.createElement('input'); input.setAttribute('value', this.firstChild.nodeValue); this.parentNode.replaceChild(input, this);">here is some text</a>. Click it.

除了<a>，您还可以使用<span> 或<div>，随心所欲。

【讨论】：

请解释一下您的意思。我在这里提交之前测试了代码，它对我有用......
当我点击文本时，在文本输入中出现文本“null”
奇怪？！我用 Opera 和 Firefox 进行了测试。你试过什么？您是否在某处嵌入了代码？
现在可以了 :)！另一个请求：我可以为输入设置一个属性，例如“名称”吗？
现在可以了吗？当时有什么问题？是的，当然您可以设置更多属性。就像我设置值属性一样，您可以另外编写 input.setAttribute('name', 'whateveryouwant');

【解决方案3】：

假设是 HTML：

<p id='changeMe'>This is some text</p>

你可以使用 jQuery：

$('#changeMe').click(function(){
    $this = $(this)
    $this.replaceWith( $('<input />').val( $this.text() ) )
})

在此处查看演示：http://jsfiddle.net/aXZ8e/

【讨论】：

我可以给输入也提供属性“文本”和“名称”吗？
是的 - 像这样$('<input />').attr({type:'text',name:'whatever'}).val( $this.text() )，或者像这样：$('<input type="text" name="whatever" />').val( $this.text()
这需要 jQuery javascript 库，我建议几乎所有网站都使用它，因为它简化了代码，并解决了许多跨平台问题。在各种例程中也有一些速度增益。
也可以设置名称，只需扩展相应的行：$this.replaceWith( $('<input />').val($this.text()).attr('name', 'yourDesiredName') )

【解决方案4】：

<span id="target" onclick="javascript:run();" >This is dummy text</span>

<script type="text/javascript">
function run() {
  var span = document.getElementById( "target" );
  var text = span.innerHTML;
  var input = document.createElement("input");

  input.type = "text";
  input.value = text;

  span.innerHTML = "";
  span.appendChild( input );

  span.onclick = null;
}
</script>

【讨论】：

我不知道为什么，但是在输入中没有出现“This is dummy text”，而是出现了“”：O
问题是 span 仍然存在，因此它再次运行 onclick 函数。如果您将 onclick 设置为 null，则不会发生这种情况。