php输入文本框样式,【js】:检测用户输入、文本框默认样式设置、设计表格样式实现全选反选...
Topic 1 : 检测用户的输入 :
题目要求:
编写一个用户注册页面
检测用户名是否是6位以下,密码是否是8位以上,如果不满足要求高亮显示文本框 ;
代码如下 :
用户注册页面
.bg {background-color: red; }
//编写一个用户注册页面
//检测用户名是否是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;
}
Topic 2 : 文本框默认样式的设置 :
这一句可以设置文本框的默认值;
效果为 :
设置文本框中的默认样式
.bg {color: gray; }
//注册事件
//如果文本框获得焦点 当内容是请输入关键字 清空内容 文字颜色恢复默认的黑色
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 = '请输入关键字';
}
}
Topic 3 : :设计一个表格的样式实现全选反选的功能
要实现的功能:
1 点击全选按钮(父的checkbox)的时候,让子的checkbox的选中状态跟父的checkbox保持一致
2 给所有的子的checkbox注册点击事件,点击子的checkbox 如果有一个子的checkbox没有选中,父的checkbox也不选中
3 反选
代码示例:
全选反选
* {
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;
}
商品价钱
iPhone88000iPad Pro5000iPad Air2000Apple Watch2000
// 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();
}
网页示例:
注意 :这一句话是核心 让子级的checkbox的状态等于父级
sons[i].checked = this.checked;
相关推荐:
php输入文本框样式,【js】:检测用户输入、文本框默认样式设置、设计表格样式实现全选反选...相关推荐
- 用js创建表格及全选反选
用js创建表格及全选反选 用js代码来实现创建表格,及全选反选,代码效果图如下: <!DOCTYPE html> <html lang="en"><h ...
- JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个 复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
- Java黑皮书课后题第7章:*7.1(指定等级)编写一个程序读入学生成绩,得到最高分best,然后根据下面的规则给出等级值。程序提示用户输入学生总数,然后提示用户输入所有的分数,最后显示等级给出结论
7.1(指定等级)编写一个程序读入学生成绩,得到最高分best,然后根据下面的规则给出等级值 题目 题目描述与运行示例 破题 代码 题目 题目描述与运行示例 *7.1(指定等级)编写一个程序读入学生成 ...
- java异常练习:要求用户输入数字,捕获并处理用户输入错误的异常,给用户进行提示
java异常练习:要求用户输入数字,捕获并处理用户输入错误的异常,给用户进行提示 参考文章: (1)java异常练习:要求用户输入数字,捕获并处理用户输入错误的异常,给用户进行提示 (2)https: ...
- js、jquery操作复选框checkbox总结(单个/多个获取选中值、初始化设置默认选中值、全选反选)
一.单个复选框 使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
- js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选 想要了解其用法,首先先得了解它们各自的意思 全选:全部都选中 反选:选中的部分取消,没选中的部分勾选上 不选:全部取消勾选 ...
- 原生js--选项卡全选反选,选项卡切换,模拟搜索框,微博发布(带时间),注册协议倒计时
1.全选反选按钮 <!DOCTYPE html> <html> <head lang="en"><meta charset="U ...
- JSjQuery全选反选父项子项联动多选框
全选反选父项子项联动多选框 js代码:<!DOCTYPE html><html lang="en"><head> <meta charse ...
- java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 快递 ...
最新文章
- 2010河北职称计算机考试,2010年河北省职称计算机考试试题..doc
- Chrome web 开发用到的插件
- [Spring] - 读写分离
- 我的机器学习入门之路(中)——深度学习(自然语言处理)
- 磁盘文件读写和数据库读写哪个效率更高
- DDD理论学习系列(4)-- 领域模型
- mysql语句使用_Mysql基本使用语句
- gvim for php,转 : Gvim建立IDE编程环境 (Windows篇)
- 数据结构之图的遍历:广度优先遍历(BFS)
- 审题解题没思路?算法大赛出题方为你指点迷津!
- 在线文本中插入符号工具
- 51Nod-1014 X^2 Mod P【暴力】
- 如何对ASP.NET进行性能优化
- Codecraft-17 and Codeforces Round #391 (Div. 1 + Div. 2, combined)
- python如何输入特殊符号_用Python打印列表中的特殊字符
- 此刻,投资自己,才是最好的投资
- 模数转换器ADC的常用术语和主要技术指标(一)
- 深度:融360还是一家有价值的公司吗?
- 2020年如何写一个现代的JavaScript库
- oracle查看表空间的属性 ,修改表空间的状态