Controls how prompts are displayed and hidden in the input box

  • 2020-03-30 01:43:08
  • OfStack

In the use of HTML + CSS + javascript page production, we tend to encounter some impact on the user experience, and we are easy to ignore the small details. For example, the prompt in the input field shows how the object can be shown and hidden as it gains and loses focus. Today, I would like to share this tip with you. I hope you don't make bricks

A,

Input input box, hide the prompt message when the cursor is displayed; Prompts are displayed when the cursor leaves the input box.

Second, the method

1. Give the input id name, Onfocus= "method name 1(this)", onblur= "method name 2(this)"

2. Declare the variable value and get the input through the id name

Function method name 1(inputObj){
 
if(inputObj.value== "......" ){ 

inputObj.value= "" ; 

} 

} 

Function method name 2(inputObj){
 
if(inputObj.value== "" ){ 

inputObj.value= "......" ; 

} 

} 

5. Note: if there are multiple input tags on the same page that require the same Settings, the method names cannot be consistent.

Three, the instance,
 
<!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> Headless document </title> 
<link href="file://CSS "type="text/ CSS" rel="stylesheet" />
<script type="text/javascript"> 
var value=document.getElementById('shuru'); 
function qingkong(inputObj){ 
if(inputObj.value==" Please enter your name "){ 
inputObj.value=""; 
} 
} 
function likai(inputObj){ 
if(inputObj.value==''){ 
inputObj.value=" Please enter your name "; 
} 
} 

</script> 
<style type="text/css"> 
 
.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=" Please enter the name of the song or the artist " onfocus="qingkong(this)" onblur="likai(this)"/> 
</body> 
</html> 

Related articles: