1、打开html编辑器,新建html文件。
2、在index.html中的body标签中,输入js代码。
3、浏览器运行index.html页面,点击按钮弹出了提示框即可。
1、使用onfocus事件检查当前值,如果是默认值,就将value属性置空.如:<inputtype="text"
value="请输入内容"
onfocus="javascript:if(this.value=='请输入内容')this.value=''">
2、<input
id="email"
type="text"
placeholder="这里输入文字"
size="22"
/>
placeholder="这里输入文字"
input设置默认显示文字的两种方式:
1.placeholder属性。在输入框为空的情况下会显示placeholder中的值。但是提交时不能直接取其值。
2.value属性。在输入框加载的时候输入框中的值。提交时可直接获取。
<script type="text/javascript">$(document).ready(function(){
$("#focus .input_txt").each(function(){
var thisVal=$(this).val()
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide()
}else{
$(this).siblings("span").show()
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("span").hide()
}).blur(function(){
var val=$(this).val()
if(val!=""){
$(this).siblings("span").hide()
}else{
$(this).siblings("span").show()
}
})
})
$("#keydown .input_txt").each(function(){
var thisVal=$(this).val()
//判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide()
}else{
$(this).siblings("span").show()
}
$(this).keyup(function(){
var val=$(this).val()
$(this).siblings("span").hide()
}).blur(function(){
var val=$(this).val()
if(val!=""){
$(this).siblings("span").hide()
}else{
$(this).siblings("span").show()
}
})
})
})
</script>