【js】：检测用户输入、文本框默认样式设置、设计表格样式实现全选反选
- php是最好的语言原创
- 2018-08-07 10:27:121594浏览
Topic 1 : 检测用户的输入 ：
题目要求：
编写一个用户注册页面
检测用户名是否是6位以下，密码是否是8位以上，如果不满足要求高亮显示文本框 ；
代码如下 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册页面</title>
<style>
.bg {background-color: red; }
</style>
</head>
<body>
<!-----id适用于js中的--->
<input type="text" name="name" id="name" /><br>
<input type="text" name="pwd" id="pwd" /><br>
<input type="submit" value="注册" id="submit" />
<script>
// 编写一个用户注册页面
// 检测用户名是否是6位以下，密码是否是8位以上，如果不满足要求高亮显示文本框 ；
var nameText = document.getElementById('name');
var pwdText = document.getElementById('pwd');
var submit = document.getElementById('submit');
//给submit按钮注册事件
submit.onclick = function () {
if(nameText.value.length < 6 && nameText.value.length > 0) {
nameText.className = '';
} else {
nameText.className = 'bg';
}
if(pwdText.value.length > 8 && pwdText.value.length < 16) {
pwdText.className = '';
} else {
pwdText.className = 'bg';
}
//取消submit的默认行为的执行 if里面不需要这句了 如果加了肯能会影响后续代码的执行
return false;
}
</script>
</body>
</html>Topic 2 : 文本框默认样式的设置 ：
这一句可以设置文本框的默认值；
效果为 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置文本框中的默认样式</title>
<style>
.bg {color: gray; }
</style>
</head>
<body>
<input type="text" id="textSearch" class="bg" value="请输入关键字" >
<input type="button" value="搜索">
<script>
//注册事件
//如果文本框获得焦点 当内容是请输入关键字 清空内容 文字颜色恢复默认的黑色
var textSearch = document.getElementById('textSearch');
textSearch.onfocus = function () {
if(textSearch.value === '请输入关键字') {
this.value = '';
//把this的属性恢复为默认值 这里作用是把文字颜色变为黑色
this.className = '';
}
}
// 当失去焦点的时候onblur。如果文本框中的内容为空 设置文本框中内容为 请输入关键字 设置字体颜色为gray
textSearch.onblur = function () {
// if (textSearch.value === '') {}
// 这一句不太好的 这个要是用户第一个输入的是空格的话那么就会误判 我们可以用它的长度来判断
if (textSearch.value.length === 0) {
this.className = 'bg';
this.value = '请输入关键字';
}
}
</script>
</body>
</html>Topic 3 : ：设计一个表格的样式实现全选反选的功能
要实现的功能：
1 点击全选按钮(父的checkbox)的时候，让子的checkbox的选中状态跟父的checkbox保持一致
2 给所有的子的checkbox注册点击事件，点击子的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不选中
3 反选
代码示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全选反选</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<p class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="father" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="son">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
<script>
// 1 点击全选按钮(父的checkbox)的时候，让子的checkbox的选中状态跟父的checkbox保持一致
//1.1 给父级的check注册事件
//获取父级checkbox
var father = document.getElementById('father');
//获取所有的子级checkbox
//注意这一句用选择器的获得元素的写法
var sons = document.querySelectorAll('#son input[type=checkbox]');
var len = sons.length;
father.onclick = function () {
//1.2遍历这个容器中的所有元素 让所有的子级checkbox的状态都等于父级的状态
for(var i = 0;i < len; i++) {
//注意这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
}
}
// 2 给所有的子的checkbox注册点击事件，点击子的checkbox 如果有一个子的checkbox没有选中，父的checkbox也不选中
// 2.1 给所有的子的checkbox注册点击事件
// 核心代码封装成方法 便于使用
function step2 () {
//2.2 只要子级有一个是false那么父级也就是false
//2.2 定义一个变量用于父级的状态 这个fatherIsTrue必须在点击事件这里面 father的赋值也是 因为每个点击事件需要判断所有的子级的状态 在外面的话是实现不了的
var fatherIsTrue = true;
for (var j = 0; j < len; j++) {
if (!sons[j].checked) {
fatherIsTrue = false;
break;
}
}
father.checked = fatherIsTrue;
}
for(var i = 0;i < len; i++) {
sons[i].onclick = function () {
step2();
}
}
//3 反选
// 给反选按钮注册一个事件
var btn = document.getElementById('btn');
btn.onclick = function () {
for(var i = 0; i < len; i++) {
sons[i].checked = !sons[i].checked;
}
//写到这里我门会有一个问题就是反选不能控制父级 但是呢我们的第二步已经完成这个问题了 所以我们把第二步
//的核心代码分装成一个方法 直接调用即可 直接粘贴复制过来不太好
step2();
}
</script>
</p>
</body>
</html>网页示例：
注意 ：这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
相关推荐：
以上是【js】：检测用户输入、文本框默认样式设置、设计表格样式实现全选反选的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn