 
<p> 
　　<input type="text" value="" name="user_name" id="user_name" /> 
　　<span style="padding-left:10px;"><input type="button" value="show" onclick="showValue()" /></span> 
</p> 
<p id="text"></p> 

javascript 部分代碼：
頁面加載時(shí)，使input自動獲得焦點(diǎn)，引導(dǎo)用戶輸入內(nèi)容。（細(xì)節(jié)加強(qiáng)用戶體驗(yàn)）

復(fù)制代碼代碼如下:

 
window.onload = function() { 
var user_name = document.getElementById("user_name"); 
user_name.focus(); 
} 

如果沒有輸入任何內(nèi)容，給出錯(cuò)誤提示，同時(shí)又讓input獲得輸入焦點(diǎn)

復(fù)制代碼代碼如下:

 
function showValue() { 
var user_name = document.getElementById("user_name"); 
var text = document.getElementById("text"); 
if(user_name.value == "") { 
alert("Please input some words"); 
user_name.focus(); 
} else { 
text.innerHTML = user_name.value; 
text.setAttribute("class", "text"); 
} 
} 

HTML代碼中的<div id="test"></div>完全可以不用，我們可以利用DOM動態(tài)創(chuàng)建，并添加到文檔中！

復(fù)制代碼代碼如下:

 
//創(chuàng)建div元素 
var text = document.createElement("div"); 
//把user_name.value的值添加到div元素中來 
text.appendChild(user_name.value); 
//最后將div元素添加到body中來 
document.body.appendChild(text); 

您可能感興趣的文章: