ホームページ > 記事 > ウェブフロントエンド > [js]: ユーザー入力の検出、テキスト ボックスのデフォルト スタイル設定、すべて選択と選択の反転を実現するテーブル スタイルの設計
[js]: ユーザー入力の検出、テキスト ボックスのデフォルト スタイル設定、すべて選択と選択の反転を実現するテーブル スタイルの設計
- php是最好的语言オリジナル
- 2018-08-07 10:27:121577ブラウズ
トピック 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>トピック 2: テキスト ボックスのデフォルト スタイルの設定:
![[js]: ユーザー入力の検出、テキスト ボックスのデフォルト スタイル設定、すべて選択と選択の反転を実現するテーブル スタイルの設計](https://img.php.cn//upload/image/199/523/553/1533608688887946.png "1533608688887946.png")
この文では、テキスト ボックス;
効果は次のとおりです: ![[js]: ユーザー入力の検出、テキスト ボックスのデフォルト スタイル設定、すべて選択と選択の反転を実現するテーブル スタイルの設計](https://img.php.cn//upload/image/832/609/640/1533608704560537.png "1533608704560537.png")
<!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>トピック 3: : すべてを選択して反転する機能を実現するためのテーブル スタイルを設計します
実現する機能:
1 すべて選択ボタンをクリックしたとき(親のチェックボックス)、子のチェックボックスの選択状態を親のチェックボックスと同じにします
2 すべての子のチェックボックスのクリックイベントを登録します。子のチェックボックスが選択されていない場合は、親のチェックボックスをクリックします。チェックボックスも選択されていません
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>Web ページの例:
![[js]: ユーザー入力の検出、テキスト ボックスのデフォルト スタイル設定、すべて選択と選択の反転を実現するテーブル スタイルの設計](https://img.php.cn//upload/image/237/889/832/1533608739833557.png "1533608739833557.png")
注: この文が核心です 子のチェックボックスのステータスを次と等しくします親
Sons[i].checked = this.checked;
関連する推奨事項:
以上が[js]: ユーザー入力の検出、テキスト ボックスのデフォルト スタイル設定、すべて選択と選択の反転を実現するテーブル スタイルの設計の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。