控制input輸入框中提示信息的顯示和隱藏的方法
更新時間:2014年02月12日 16:02:07 作者:
這篇文章主要介紹了怎樣控制input輸入框中提示信息的顯示和隱藏 ,需要的朋友可以參考下
在運用html+css+javascrpt進行頁面制作時,我們往往會遇到一些影響用戶體驗,而又容易被我們忽視的小細節(jié)。比如,input輸入框中的提示信息,怎樣才能根據(jù)對象獲得和失去焦點而實現(xiàn)其顯示和隱藏。今天在這里,想跟大家分享一下這個小技巧,希望各位大神不要拍磚哦~~~
一、要求
input輸入框,在光標顯示時,隱藏提示信息;光標離開輸入框時,顯示提示信息。
二、方法
1、給該input取id名,Onfocus=”方法名1(this)”,onblur=”方法名2(this)”
2、聲明變量value,通過id名獲得該input
3、function 方法名1(inputObj){
if(inputObj.value==”……”){
inputObj.value=””;
}
}
4、function 方法名2(inputObj){
if(inputObj.value==””){
inputObj.value=”……”;
}
}
5、注意:如果同一個頁面中有多個input標簽需要同樣的設(shè)置,則方法名不能一致。
三、實例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="file:///E|/做過的網(wǎng)站/midi/css/index.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
var value=document.getElementById('shuru');
function qingkong(inputObj){
if(inputObj.value=="請輸入您的姓名"){
inputObj.value="";
}
}
function likai(inputObj){
if(inputObj.value==''){
inputObj.value="請輸入您的姓名";
}
}
</script>
<style type="text/css">
/*下面這段文字,可以在ie瀏覽器中改變輸入框的背景顏色*/
.search input{star : expression(onmouseover=function(){
this.style.backgroundColor="#FF0000"
},
onmouseout=function(){
this.style.backgroundColor="#FFFFFF"
})
}
</style>
</head>
<body>
<input type="text" id="shuru" value="請輸入歌曲名或歌手名" onfocus="qingkong(this)" onblur="likai(this)"/>
</body>
</html>
一、要求
input輸入框,在光標顯示時,隱藏提示信息;光標離開輸入框時,顯示提示信息。
二、方法
1、給該input取id名,Onfocus=”方法名1(this)”,onblur=”方法名2(this)”
2、聲明變量value,通過id名獲得該input
3、function 方法名1(inputObj){
復(fù)制代碼 代碼如下:
if(inputObj.value==”……”){
inputObj.value=””;
}
}
4、function 方法名2(inputObj){
復(fù)制代碼 代碼如下:
if(inputObj.value==””){
inputObj.value=”……”;
}
}
5、注意:如果同一個頁面中有多個input標簽需要同樣的設(shè)置,則方法名不能一致。
三、實例
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<link href="file:///E|/做過的網(wǎng)站/midi/css/index.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
var value=document.getElementById('shuru');
function qingkong(inputObj){
if(inputObj.value=="請輸入您的姓名"){
inputObj.value="";
}
}
function likai(inputObj){
if(inputObj.value==''){
inputObj.value="請輸入您的姓名";
}
}
</script>
<style type="text/css">
/*下面這段文字,可以在ie瀏覽器中改變輸入框的背景顏色*/
.search input{star : expression(onmouseover=function(){
this.style.backgroundColor="#FF0000"
},
onmouseout=function(){
this.style.backgroundColor="#FFFFFF"
})
}
</style>
</head>
<body>
<input type="text" id="shuru" value="請輸入歌曲名或歌手名" onfocus="qingkong(this)" onblur="likai(this)"/>
</body>
</html>
相關(guān)文章
JS在onclientclick里如何控制onclick的執(zhí)行
這篇文章主要介紹了JS在onclientclick里如何控制onclick的執(zhí)行的相關(guān)資料,需要的朋友可以參考下2016-05-05詳解如何在JavaScript中無縫地集成和使用Python代碼
這篇文章主要目標是幫助諸位理解如何在JavaScript中無縫地集成和使用Python代碼,文中的示例代碼講解詳細,感興趣的小伙伴可以了解一下2023-06-06在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法
這篇文章主要介紹了在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法,本文方法從Underscore.js中摘錄而來,需要的朋友可以參考下2014-09-09layui 實現(xiàn)表單和文件上傳一起傳到后臺的例子
今天小編就為大家分享一篇layui 實現(xiàn)表單和文件上傳一起傳到后臺的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09