javascript - 如何将输入文本字段替换为跨度文本？

Question

在文本字段中输入值后，我想将文本字段替换为不可编辑的字段。

<input type="text" id="text" value="">
<input type="button" id="btn" value="click">

在文本字段中输入数据值并单击按钮后，我想将这些文本字段和按钮替换为 span 中的文本。

<span id="changedText"></span> 

我怎么能用 Jquery 做到这一点？提前致谢。

Answer 1

您应该首先在输入元素中获得价值：

var data = $("#text").val();

然后创建 span 元素并用它替换输入

$("#text").replaceWith('<span id="changedText">'+data+'</span>') 

当用户点击按钮时，这一切都会发生

$("#btn").click(function(){
     var data = $("#text").val();
     $("#text").replaceWith('<span id="changedText">'+data+'</span>') 
});

Answer 2

你可以这样做 -

$('#btn').on('click',function(){
   $('#text').replaceWith("<span id='changedText'>"+$('#text').val()+"</span>");
});

Answer 3

最初，隐藏跨度。单击按钮隐藏输入，将文本复制到跨度，并显示跨度。

点击这里查看它的实际效果

$("#btn").click(function(){
   $("#changedText").html($("#text").val());
   $("#text").hide();
});