如何通過用戶輸入更改文本？

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