控制input輸入框中提示信息的顯示和隱藏的方法

時間 2019-12-01

標籤控制 input 輸入提示信息顯示隱藏方法简体版

原文原文鏈接

在運用html+css+javascrpt進行頁面製做時，咱們每每會遇到一些影響用戶體驗，而又容易被咱們忽視的小細節。好比，input輸入框中的提示信息，怎樣才能根據對象得到和失去焦點而實現其顯示和隱藏。今天在這裏，想跟你們分享一下這個小技巧，但願各位大神不要拍磚哦~~~
1、要求
input輸入框，在光標顯示時，隱藏提示信息；光標離開輸入框時，顯示提示信息。
2、方法
一、給該input取id名，Onfocus=」方法名1(this)」，onblur=」方法名2(this)」
二、聲明變量value，經過id名得到該input javascript

三、function 方法名1(inputObj){ css

if(inputObj.value==」……」){
 
inputObj.value=」」;
 
}
 
}

四、function 方法名2(inputObj){ html

if(inputObj.value==」」){
 
inputObj.value=」……」;
 
}
 
}

五、注意：若是同一個頁面中有多個input標籤須要一樣的設置，則方法名不能一致。
3、實例 java

<!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|/作過的網站/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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。