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;

相关推荐：