最も簡単な入力ボックスプロンプト機能を実現
25176 ワード
： 、
onBlur:
onFocus: ，
Onchange: ，
Onselect: ，
onpropertychange
keyup onchange ，
javascript input ， :<input name="pwuser" type="text" id="pwuser" class="input" value=" " onBlur="if(this.value=='') this.value=' ';" onFocus="if(this.value==' ') this.value='';" />
<input name="pwpwd" type="password" class="input1" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> jquery
， jQuery focus(),blur()。
focus()： ， javascript onfocus 。
:
$("p").focus(); $("p").focus(fn)
blur()： ， onblur 。
:
$("p").blur(); $("p").blur(fn)
:
<form>
<label for="searchKey" id="lbSearch"> ？label> label ，
<input id="searchKey" type="text" />
<input type="submit" value=" " />
form> jquery
:$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text(' ？');
});
}) ， ：
:
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=gb2312" />
<title> title>
head>
<script>
function tt(){
var i=document.form1.text1.value;
if(i.length>=6)
document.getElementById("s1").innerHTML=" 6 ";
else
document.getElementById("s1").innerHTML="";
}
function a(){
var j=document.form1.text2.value;
if(j.length>=6)
document.getElementById("s2").innerHTML=" 6 "
else
document.getElementById("s2").innerHTML="";
}
script>
<body>
<form name="form1">
：<input type="text" id="text1" value=" " onfocus="javascript:document.form1.text1.value=''" onblur="tt()"/>
<span id="s1">span><br />
:<input type="text" id="text2" value=" " onfocus="javascript:document.form1.text2.value=''" onblur="a()"/>
<span id="s2">span><br />
<input type="button" id="button" value=" " />
form>
body>
html> ： html5
html5 ， ：email,tel,number,time,required,autofocus,placeholder ， 。
placeholder ， 。 input value ， placeholder 。
：
"text" value="" placeholder=" " />
： jQuery
： val title 。
：
"text" value="" title=" " />
:<script type="text/javascript">
$(function() {
var $input = $("input");
$input.each(function() {
var $title = $(this).attr("title");
$(this).val($title);
$(this).focus(function() {
if($(this).val() === $title) {
$(this).val('');
}
})
.blur(function() {
if($(this).val() === "") {
$(this).val($title);
}
});
});
});
script> 、 JavaScript
:@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %>
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 runat="server">
<title> title>
<script language="javascript">
function text1_onmouseover(it)
{
it.focus();
it.select();
it.style.backgroundColor="red";
}
function text1_onmouseout(it)
{
it.onblur;
it.style.backgroundColor="white";
}
script>
head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server">asp:TextBox>
div>
form>
body>
html>