Question

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

Answer 1

这样的事情

HTML

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

的Javascript

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

希望我能正确理解你的问题。

Answer 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>。

Answer 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/

Answer 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>

如何将文本转换为输入？

4 个答案: