Question

我一直在搜索这个超过5个小时，没有帮助大声笑。

我希望有一个可以输入的表单字段（文本）。无论是键入还是在字段模糊之后，我希望该文本显示在屏幕上的div中。也许这是不可能的。

这是我尝试的最后一段代码，当然它不起作用。

 <p>Headline Text:<br />
 <input type="text" name="headline" value="$headline" onChange="document.getElementById('headline2').value=this.value" /></p>
 <br />
 <div id="headline2"></div>

在该代码中，headline中输入的任何内容都会出现在模糊的<div id="headline2"></div>上。

任何帮助都会很棒。

Answer 1

HTML：

<input>
<div id="target"></div>

使用Javascript：

var input = document.querySelector('input');
var target = document.querySelector('div')

input.addEventListener('blur', function() {
  target.innerHTML = input.value
})

我建议您将脚本与标记分开，但如果您这样选择...

<input onblur="document.getElementById('target').innerHTML = this.value">
<div id="target"></div>

Answer 2

你不远!!! <div>没有值...但是有内部HTML。 ;）

这是改变：

    <p>Headline Text:<br />
      <input type="text" name="headline" value="$headline" onChange="document.getElementById('headline2').innerHTML=this.value" /></p>
    <br />
    <div id="headline2"></div>

关键词：

    <p>Headline Text:<br />
      <input type="text" name="headline" value="$headline" onKeyup="document.getElementById('headline2').innerHTML=this.value" /></p>
    <br />
    <div id="headline2"></div>

Answer 3

表单输入具有值属性，容器元素（如div）具有innerHTML。试试这个：

<p>Headline Text:<br />
<input type="text" name="headline" value="$headline" 
onChange="document.getElementById('headline2').innerHTML=this.value" />
</p>
<br />
<div id="headline2"></div>

Answer 4

这很有可能，你和你的尝试非常接近。问题是<div>元素没有value，只有innerHTML。此外，您可能正在寻找onblur而不是onChange：

＆＃13;

<p>Headline Text:<br />
  <input type="text" name="headline" value="$headline" onblur="document.getElementById('headline2').innerHTML = this.value" /></p>
<br />
<div id="headline2"></div>

＆＃13;

请记住，使用onblur时，您必须实际点击元素外部才能显示更改。如果您希望在用户输入内容时进行更改，则需要改为onkeyup。

希望这有帮助！：）

Answer 5

<input type="text" id="text" onkeyup="getTextVal()">
<div id="showtext"></div>
<script>
function getTextVal(){
    var val = document.getElementById('text').value;
  var showText = document.getElementById('showtext');
  showText.innerText = val;
}
</script>

请参阅jsfiddle link

在表格场的模糊中显示DIV中的文本

5 个答案: