如何将输入文本字段替换为span中的文本？

Question

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

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

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

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

我怎样才能用Jquery做到这一点？   提前谢谢。

Answer 1

首先应该在input元素中获取值：

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

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

click here to see it in action

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