Table of Contents

Topic 1: Detecting user input: " >Topic 1: Detecting user input:

" > Topic 2: Setting the default style of the text box:

" >Topic 3: : Design a table style to realize the function of selecting all and inverting the selection

Home

Web Front-end

JS Tutorial

[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

php是最好的语言

Aug 07, 2018 am 10:27 AM

Topic 1: Detecting user input:

##Topic requirements:

Write a user registration page

Check whether the username is less than 6 characters and whether the password is more than 8 characters. If the requirements are not met, highlight the text box;

The code is as follows:

<!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(&#39;name&#39;);
        var pwdText = document.getElementById(&#39;pwd&#39;);
        var submit = document.getElementById(&#39;submit&#39;);
        //给submit按钮注册事件
        submit.onclick = function () {
            if(nameText.value.length < 6 && nameText.value.length > 0) {
                nameText.className = &#39;&#39;;
            } else {
                nameText.className = &#39;bg&#39;;
            }
             
            if(pwdText.value.length > 8 && pwdText.value.length < 16) {
                pwdText.className = &#39;&#39;;
            } else {
                pwdText.className = &#39;bg&#39;;
            }
            //取消submit的默认行为的执行   if里面不需要这句了  如果加了肯能会影响后续代码的执行
            return false;
        }
     
    </script>
</body>
</html>

Copy after login

Topic 2: Setting the default style of the text box:

[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

#This sentence can set the default value of the text box;

The effect is:

[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

<!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(&#39;textSearch&#39;);
        textSearch.onfocus = function () {
            if(textSearch.value === &#39;请输入关键字&#39;) {
                this.value = &#39;&#39;;
                //把this的属性恢复为默认值   这里作用是把文字颜色变为黑色
                this.className = &#39;&#39;;
            }
        }
        // 当失去焦点的时候onblur。如果文本框中的内容为空  设置文本框中内容为 请输入关键字 设置字体颜色为gray
        textSearch.onblur = function () {
            // if (textSearch.value === &#39;&#39;) {}
            // 这一句不太好的  这个要是用户第一个输入的是空格的话那么就会误判  我们可以用它的长度来判断
            if (textSearch.value.length === 0) {
                this.className = &#39;bg&#39;;
                this.value = &#39;请输入关键字&#39;;
            }
        }
 
         
    </script>
</body>
</html>

Copy after login

Topic 3: : Design a table style to realize the function of selecting all and inverting the selection

Function to be realized:

1 When clicking the select all button (parent's checkbox), keep the selected state of the child's checkbox consistent with the parent's checkbox

2 Register click events for all child's checkboxes, Click the child's checkbox. If one of the child's checkboxes is not selected, the parent's checkbox is also not selected

3 Inverse selection

Code example:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<!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(&#39;father&#39;);
          //获取所有的子级checkbox
          //注意这一句用选择器的获得元素的写法
          var sons = document.querySelectorAll(&#39;#son input[type=checkbox]&#39;);
          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(&#39;btn&#39;);
          btn.onclick = function () {
              for(var i = 0; i < len; i++) {
                  sons[i].checked = !sons[i].checked;
              }
              //写到这里我门会有一个问题就是反选不能控制父级  但是呢我们的第二步已经完成这个问题了  所以我们把第二步
              //的核心代码分装成一个方法  直接调用即可  直接粘贴复制过来不太好
              step2();
          }
      </script>
  </p>
</body>
</html>

Copy after login

Web page example:

[js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection

Note: This sentence is the core. Let the status of the child's checkbox be equal to the parent's sons [i].checked = this.checked;

Related recommendations:

How to select and invert all js checkboxes

js Implementation code for setting the style of the selected row

The above is the detailed content of [js]: Detect user input, text box default style setting, design table style to achieve select all and invert selection. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

4 weeks ago By DDD

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1659

CakePHP Tutorial

1416

Laravel Tutorial

1310

PHP Tutorial

1258

C# Tutorial

1232

Related knowledge

Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

JavaScript Engines: Comparing Implementations Apr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

JavaScript: Exploring the Versatility of a Web Language Apr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

Python vs. JavaScript: The Learning Curve and Ease of Use Apr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration) Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

From C/C to JavaScript: How It All Works Apr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration) Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

See all articles