如何通过用户输入更改文本？

Question

我有一个页面，其中包含<input>和<span>。

我不知道该怎么做，用户在输入中写入的文本将显示为跨度。

的代码（即不顺利）：

HTML：

<h1>Lets talk with SpongBob!</h1> 
<span>Say "hello":</span> 
<form name="frm"><input name="question" type="text"><input id="submit" type="submit" value="Submit"></form> 
<div id="igool"><span id="talk"></span></div> 
<div id="Triangle"></div> 
<img src="http://static.tumblr.com/f1bbfdf0fd794b1cf8d243d65644be01/i0ldeup/bURmj2ccf/tumblr_static_spongebob.jpg"/> 

CSS：

body { 
    font-family: "Comic Sans MS", cursive, sans-serif; 
} 
h1 { 
    text-align: center; 
} 
img { 
    width: 300px; 
    margin-left: 20%; 
} 
input { 
    position: absolute; 
    width: 10%; 
    margin-left: 45%; 
    border: 2px solid black; 
    border-radius: 4px; 
    background-color: lightgray; 
} 
#submit { 
    margin-left: 57%; 
    width: 5%; 
} 
span { 
    position: absolute; 
    margin-left: 37%; 
    } 
#Triangle { 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 

    border-top: 30px solid lightgray; 
    margin-top: -0.5%; 
    margin-left: 41%; 

} 
#igool { 
    width: 120px; 
    height: 100px; 
    background-color: lightgray; 
    border-radius: 100%; 
    margin-left: 38%; 
    margin-top: 8%; 
} 
#talk { 
    margin-left: 2%; 
    margin-top: 3%; 
} 

的Javascript

if (document.forms['frm'].question.value == "hello") { 
    document.getElementById("talk").innerHTML="Hello you to!"; 
} 
else { 
    document.getElementById("talk").innerHTML="WhatEver..."; 
} 

Answer 1

您不必实际提交表单，如果你得到的是JavaScript，然后再有这样的而不是代码：

window.onload = function() { 
    var oForm = document.forms["frm"]; 
    var oTalkSpan = document.getElementById("talk"); 
    oForm.onsubmit = function() { 
     if (this.elements["question"].value == "hello") { 
      oTalkSpan.innerHTML="Hello you to!"; 
     } 
     else { 
      oTalkSpan.innerHTML="WhatEver..."; 
     } 
     return false; 
    }; 
}; 

Live test case。

如果您选择提交表单，则必须使用服务器端语言（如PHP，ASP.NET或许多其他语言），但不能使用客户端脚本进行此操作。

Answer 2

如果我正确地关注你，你需要JavaScript事件。查找blur()或keyup()并且应该这样做。你需要将它们连接到输入标签。

Answer 3

试试这个：

演示：Fiddle

document.forms['frm'].onsubmit = function() { 
    if (document.forms['frm'].question.value == "hello") { 
     document.getElementById("talk").innerHTML="Hello you to!"; 
    } 
    else { 
     document.getElementById("talk").innerHTML="WhatEver..."; 
    } 
    return false; 
} 

Answer 4

，你可以在短短的三行用jQuery这样做：

$('input#one').keyup(function(){ 

$('span#test').html($(this).val()); 

}) 

和HTML：

<span id="test"></span> 
<br/> 
<input type="text" id="one"/> 

这是DEMO