在标签javascript中使用输入类型值将输入文本字段更改为标签

Posted 2023-03-07

【中文标题】在标签javascript中使用输入类型值将输入文本字段更改为标签

【英文标题】：change input text field into label with input typed value inside label javascript

【发布时间】：2015-10-21 11:41:57

【问题描述】：

我想将文本字段更改为标签标签，其中包含用户输入的文本。我已经尝试并看到了许多正在工作但未将值设置为标签中的文本的示例。例如：

<input id="1" type="text" value="hi"/>

我想用它的innerhtml hi 或用户键入的值替换这个输入文本字段的标签或 div 标签，我尝试了下面的示例，但我没有这样做。

<p id="1" onclick="wish(id)">sasdsad</p>
<script>    
    document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div");
</scrip>

【问题讨论】：

抱歉有错误 document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div");

我在jsfiddle.net/s98J5找到了这个例子

ID 不能也不应该只是一个数字，它们必须以一些文本标识符开头，例如 <p id="sad1">sadsad</p>

是的，它适用于上述示例，但它不适用于解决问题，谢谢

你想要这样的东西吗 - jsfiddle.net/xwszt2s9

【参考方案1】：

元素 id 应该以字符而不是数字开头。

使用 jQuery

<input id="one" type="text" value="hi"/>

$('#one').replaceWith("<div>"+$('#one').val()+"</div>");

【参考方案2】：

或者您也可以像这样使用，只是作为替代解决方案：

html

<input id="toChange" type="text" value="hi"/>
<p id="clickMe" onclick="changeTag()">Click Me</p>

jQuery

function changeTag()
  var originalForm = $('#toChange');
  var div = $('<div/>',
               text : originalForm.val(),
               id : originalForm.attr('id')
            );
  $('#toChange').replaceWith(div);

DEMO

【讨论】：

演示链接失效