DEMO：

Question

我有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>

Answer 1

您可以为span标记使用innerHTML属性，如下所示：

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

Answer 2

您可以尝试以下操作，这是普通的Javascript 获得可以使用的值

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

对于现代浏览器

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

<强> CODE

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

添加了fiddle

Answer 3

希望这会对你有所帮助。

<!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>

Answer 4

如果您使用 jquery ，则可以在span写入时实时顺利实时更新input：< / p>

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

DEMO：

$('#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>

Answer 5

添加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>

Answer 6

你可以简单地说：

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

如何将文本从输入框获取到跨度

6 个答案:

DEMO：