搜 索

js实现输入框提示信息以及多个文本框自动获取焦点效果

编辑:QTOOL.NET日期:2019-08-19472

有时候,我们会在一些网站输入框中看见一串提示信息,鼠标点击后提示信息自动消失,怎样才能实现这样的效果呢?
代码如下:
   <input name="text"  type="text"  value="这是一句提示信息" onFocus="this.value=''" onBlur="if(!value){value=defaultValue;}">
 
那么想要实现网页中输入序列号自动焦点跳到下一文本框效果又该怎么办
代码如下:
<script language="javascript" type="text/javascript">
function checkd1() {
if(document.checkf.d1.value.length==4){
document.checkf.d2.focus();
}
}
function checkd2() {
if(document.checkf.d2.value.length==4){
document.checkf.d3.focus();
}
}
function checkd3() {
if(document.checkf.d3.value.length==4){
document.checkf.d4.focus();
}
}
</script>
<form method="POST" name="checkf">
输入序列:
<input type="text" name="d1" size="4"  maxlength="4" onkeyup="checkd1()">-
<input type="text" name="d2" size="4" maxlength="4" onkeyup="checkd2()">-
<input type="text" name="d3" size="4" maxlength="4" onkeyup="checkd3()">-
<input type="text" name="d4" size="4" maxlength="4">
</form>
 
通过以上两种方法我们也可以合起来实现输入到一定字符数自动跳到新的输入框中,且包含提示信息.
 
<script language="javascript" type="text/javascript">
function ckd1() {
if(document.ckf.d1.value.length==4){
document.ckf.d2.focus();
}
}
function ckd2() {
if(document.ckf.d2.value.length==4){
document.ckf.d3.focus();
}
}
function ckd3() {
if(document.ckf.d3.value.length==4){
document.ckf.d4.focus();
}
}
</script>
 
<form method="POST" name="ckf">
输入序列:
<input type="text" name="d1" size="4" value="1111" onFocus="this.value=''" onBlur="if(!value){value=defaultValue;}" maxlength="4" onkeyup="ckd1()">-
<input type="text" name="d2" size="4" value="2222" onFocus="this.value=''" onBlur="if(!value){value=defaultValue;}" maxlength="4" onkeyup="ckd2()">-
<input type="text" name="d3" size="4" value="3333" onFocus="this.value=''" onBlur="if(!value){value=defaultValue;}" maxlength="4" onkeyup="ckd3()">-
<input type="text" name="d4" size="4" value="4444" onFocus="this.value=''" onBlur="if(!value){value=defaultValue;}" maxlength="4">
</form>

TAG标签:js
此文章由QTOOL.NET编辑
最新文章

热门标签