如何將輸入文本字段替換為跨度文本？

Question

我想在文本字段中輸入值后將文本字段替換為不可編輯的字段。

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

在文本字段中輸入數據值並單擊按鈕后，我想將這些文本字段和按鈕替換為跨度文本。

<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();
});