簡體   English   中英

如何從輸入框獲取文本到跨度

[英]How to get text from input box to a span

我已經有了HTML,但不確定如何將輸入框放入范圍。 我嘗試使用document.getElementById但這沒有用。 任何幫助將是巨大的!

Name:
<p>
  <input type="text" name="fname" id="name">
<p>
  <button id= "button" onclick="namejs">Go</button>
<p>
  <span id= "namespan">Name</span>

您可以為span標簽使用innerHTML屬性,如下所示:

var name = document.getElementById("name").value; //get name from TextBox
document.getElementById("namespan").innerHTML=name ; //write in span

您可以嘗試以下操作,這是純Javascript獲取可以使用的值

document.getElementById("myspan").innerHTML="value";

對於現代瀏覽器

document.getElementById("myspan").textContent="value";

Name:
<p>
<input type="text" name="fname" id="name">
  <p>
<button id= "button" onclick="myFunction()">Go</button>
  <p>
  <span id="namespan">Name</span>

function myFunction() {
  var name = document.getElementById("name").value;
  document.getElementById("namespan").textContent=name;
}

添加了一個小提琴

希望這會幫助你。

<!DOCTYPE html>
<html>
<head>
    <script>
    function showInput() {
        document.getElementById('display').innerHTML =
            document.getElementById("user_input").value;
    }
</script>
</head>
<body>
<form>
    <label><b>Enter a Message</b></label>
    <input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();">
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>

如果使用jquery ,則在input時可以實時平滑地更新span

$('#namespan').html($('#name').val()); // GET Value of INPUT --> SET IT as inner HTML of span

演示:

 $('#name').keyup(function(){ $('#namespan').html($(this).val()); // GET Value of INPUT --> SET IT as inner HTML of span }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Name: <p> <input type="text" name="fname" id="name"> </p> <p> <button id= "button" onclick="namejs">Go</button> </p> <p> <span id= "namespan">Name</span></p> 

添加一個onkeyup事件處理程序

 document.getElementById('name').onkeyup = function() { document.getElementById('namespan').innerHTML = this.value; } 
 Name: <p> <input type="text" name="fname" id="name"> </p> <p> <button id="button" onclick="namejs">Go</button> </p> <p> <span id="namespan">Name</span> </p> 

您可以簡單地:

HTML:

Name:
<p><input type="text" name="fname" id="name"><p>
<p><button id= "button">Go</button></p>
<p><span id= "namespan">Name</span></p>

jQuery的:

$('#button').click(function(){
$('#namespan').text($('#name').val()); 
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM