需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,输入问题基础代码。
2、在index.html中的<body>标签中,输入js代码:
function fun() {
alert('click success!')
}
3、浏览器运行index.html页面,此时点击按钮弹出了提示框。
<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>
<input value="请输入搜索内容" onfocus="javascript:this.value=''" type="text" id="ipt1" /><input value="提交" type="Submit" id="btn1" onclick="checkform()" />
<script type="text/javascript">
function checkform(){
if(document.getElementById('ipt1').value.length==0){
alert('输入为空!')
document.getElementById('ipt1').focus()
return false
}
if(document.getElementById('ipt1').value=="请输入搜索内容"){
alert('输入为空!')
document.getElementById('ipt1').focus()
return false
}
}
</script>