1.用onblur和onfocus这两个鼠标事件,根据效果图,补充代码,实现下列功能:
(1) 当输入框获得焦点:
如果输入框值为空,提示“请输入您的姓名”
(2) 当输入框失去焦点:
如果输入框值为空,提示“用户名不能为空”,并且边框颜色变为红色
如果输入框值不为空,那么没有提示文字,边框颜色是默认颜色。
<style>
.red{
border: 1px solid red;
}
</style>
</head>
<body>
姓名:<input type="text" name="" ><span style="display: none;">请输入你的姓名</span>
<script>
var name1 = document.getElementsByTagName("input")[0];
var name2 = document.getElementsByTagName("span")[0];
name1.onfocus=function(){
name2.style.display = 'inline';
}
name1.onblur=function(){
if(this.value == ""){
name2.innerHTML = "用户名不能为空";
this.className = "red";
}else{
name2.innerHTML = "";
this.className="yellow";
}
}
</script>
</body>
2.使用onchange事件实现下列功能:
(1) 选择下拉列表中不同的选项,页面中的div就设置成不同的背景颜色,div中的内容也发生变化。 比如:选择黄色选项,div的背景颜色就变为黄色,文本内容就变为“我的背景颜色变成了yellow色”
(2)当选择下拉列表中的“请选择”时,div的背景颜色变成白色,文本变为“我没有发生任何变化”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
</head>
<body>
<div>
<span>请选择您喜欢的颜色:</span>
<select id="color">
<option value="0">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div">我是div</div>
<script>
var color = document.getElementById("color");
var div = document.getElementById("div");
color.onchange = function(){
//检验点击选项是否能触发
// console.log("ybq");
// var bgcolor = this.value;
console.log(bgcolor);
if(bgcolor == 0){
div.style.backgroundColor = "white";
}
else
div.style.backgroundColor = bgcolor;
}
</script>
</body>
</html>
3.实现:
(1) 在文本域中输入文本,文本域的字数限制在30个字以内。
(2) 每当用户输入一个字,就要提示还能输入多少个字
(3) 当用户输入的文本超出了30个字时,要提示用户超出了多少字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>字数限制在30字内,<span >您还可以输入<b id="io">30</b> 字</span></p>
<textarea cols="50" rows="7" id="text"></textarea>
<script>
var kl = document.getElementById("io");
var lp = document.getElementById("text");
var po = document.getElementsByTagName("span")[0];
var total = 30;
document.onkeyup = function () {
var o = lp.value.length;
left = total - o;
if (left >= 0) {
kl.innerHTML = left;
} else {
kl.innerHTML = -left;
po.innerHTML = "您已超出" + kl.innerHTML + "字";
}
}
</script>
</body>
</html>