


How to develop verification code and password input box function in WeChat applet
May 31, 2018 pm 02:29 PMThis time I will bring you how to develop the verification codepassword input box function in the WeChat applet, and how to develop the verification code password input box function in the WeChat appletNotes What are they? Here are actual cases. Let’s take a look.
When making a small program, I made a 6-digit verification code input box. I thought it was very simple, but I encountered various resistances while writing it, and there was very little information available online. Later, after After some thinking, I finally finalized the plan that I am most satisfied with, and I am sending it here for everyone to refer to. I hope it can help everyone!
1. The renderings are as follows:
##2. Code part
wxml:<form bindsubmit="formSubmit">? ?<view class='content'>? ??<block wx:for="{{Length}}" wx:key="item">? ???<input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}"?disabled?password='{{ispassword}}'?catchtap='Tap'></input>? ??</block>? ?</view>? ?<input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>? ?<view>? ??<button class="btn-area" formType="submit">Submit</button>? ?</view>? </form>js:
Page({? ?/**? ??*?頁面的初始數(shù)據(jù)? ??*/? ?data:?{? ??Length:6,????//輸入框個數(shù)? ??isFocus:true,??//聚焦? ??Value:"",????//輸入的內(nèi)容? ??ispassword:true,?//是否密文顯示?true為密文,?false為明文。? ?},? ?Focus(e){? ??var?that?=?this;? ??console.log(e.detail.value);? ??var?inputValue?=?e.detail.value;? ??that.setData({? ???Value:inputValue,? ??})? ?},? ?Tap(){? ??var?that?=?this;? ??that.setData({? ???isFocus:true,? ??})? ?},? ?formSubmit(e){? ??console.log(e.detail.value.password);? ?},? })wxss:
content{? ?display:?flex;? ?justify-content:?space-around;? ?align-items:?center;? ?margin-top:?200rpx;? }? iptbox{? ?width:?80rpx;? ?height:?80rpx;? ?border:1rpx?solid?#ddd;? ?border-radius:?20rpx;? ?display:?flex;? ?justify-content:?center;? ?align-items:?center;? ?text-align:?center;? }? ipt{? ?width:?0;? ?height:?0;? }? btn-area{? ?width:?80%;? ?background-color:?orange;? ?color:white;? }
3. Ideas:
1. Place an input box, hide its text and position, and set the style of the payment input box (form)2. When the input box is clicked When setting the input box to the focused state, arouse the keyboard, click on the blank space, lose focus, and set it to the lost focus style. Because the width and height of the input box are 0, the input box and cursor will not be displayed, thus hiding it.
3. Limit the maximum number of words in the input box and monitor the status of the input box. Use the length of the input box value as the rendering condition for the content of the input box (table)
4. When the submit button is clicked, obtain the content of the input box.
Detailed explanation of the use of JS and PHP keyword search functions
Implementation of uploading image attachments in the WeChat applet Backend code
The above is the detailed content of How to develop verification code and password input box function in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

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

Hot Article

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

When using Win11 system, sometimes you will encounter a prompt that requires you to enter the administrator username and password. This article will discuss how to deal with this situation. Method 1: 1. Click [Windows Logo], then press [Shift+Restart] to enter safe mode; or enter safe mode this way: click the Start menu and select Settings. Select "Update and Security"; select "Restart Now" in "Recovery"; after restarting and entering the options, select - Troubleshoot - Advanced Options - Startup Settings -&mdash

1. After opening WeChat, click the search icon, enter WeChat team, and click the service below to enter. 2. After entering, click the self-service tool option in the lower left corner. 3. After clicking, in the options above, click the option of unblocking/appealing for auxiliary verification.

This article will explore how to solve the problem of wrong password, especially the need to be careful when dealing with BitLocker warnings. This warning is triggered when an incorrect password is entered multiple times in BitLocker to unlock the drive. Usually, this warning occurs because the system has a policy that limits incorrect login attempts (usually three login attempts are allowed). In this case, the user will receive an appropriate warning message. The complete warning message is as follows: The password entered is incorrect. Please note that continuously entering incorrect passwords will cause the account to be locked. This is to protect the security of your data. If you need to unlock your account, you will need to use a BitLocker recovery key. The password is incorrect, beware the BitLocker warning you receive when you log in to your computer

Wireless networks have become an indispensable part of people's lives in today's digital world. Protecting the security of personal wireless networks is particularly important, however. Setting a strong password is key to ensuring that your WiFi network cannot be hacked by others. To ensure your network security, this article will introduce in detail how to use your mobile phone to change the router WiFi password. 1. Open the router management page - Open the router management page in the mobile browser and enter the router's default IP address. 2. Enter the administrator username and password - To gain access, enter the correct administrator username and password in the login page. 3. Navigate to the wireless settings page - find and click to enter the wireless settings page, in the router management page. 4. Find the current Wi

With the popularity of Douyin, more and more users are beginning to use this platform to enjoy the fun of short videos. In order to protect the security of user accounts, Douyin provides a variety of login methods, among which password login is a common and important method. So, how to set a password to log in to Douyin? 1. How to set a password to log in to Douyin? 1. Open Douyin APP, click the "Me" button in the lower right corner to enter the personal homepage. 2. Under the personal homepage, find the "Settings" option and click to enter. 3. In the settings page, find the "Account and Security" option and click to enter. 4. On the Account and Security page, find the "Login Password" option and click to enter. 5. If a login password has not been set, the system will prompt you to set a login password. Enter the password you want to set

In the Windows 10 system, the password policy is a set of security rules to ensure that the passwords set by users meet certain strength and complexity requirements. If the system prompts that your password does not meet the password policy requirements, it usually means that your password does not meet the requirements set by Microsoft. standards for complexity, length, or character types, so how can this be avoided? Users can directly find the password policy under the local computer policy to perform operations. Let’s take a look below. Solutions that do not comply with password policy specifications: Change the password length: According to the password policy requirements, we can try to increase the length of the password, such as changing the original 6-digit password to 8-digit or longer. Add special characters: Password policies often require special characters such as @, #, $, etc. I

Our mobile phones have become an integral part of our lives in modern society. Wireless network connections have also become an indispensable tool in our daily lives. However, sometimes we face such a situation: we want to connect to other devices but are unable to do so, we connect to WiFi but forget the password. How to easily get the WiFi password of a connected mobile phone? Find the saved WiFi password on the phone 1. Find the "WiFi" option in the settings, find and click it, and enter the phone's settings interface "WiFi" to enter the WiFi settings page, option. 2. Open the connected WiFi network details, find the name of the connected WiFi network, click to enter the detailed information page of the network, in the WiFi settings page. 3.

Wireless networks have become an indispensable part of our lives with the rapid development of the Internet. In order to protect personal information and network security, it is very important to change your wifi password regularly, however. To help you better protect your home network security, this article will introduce you to a detailed tutorial on how to use your mobile phone to change your WiFi password. 1. Understand the importance of WiFi passwords. WiFi passwords are the first line of defense to protect personal information and network security. In the Internet age, understanding its importance can better understand why passwords need to be changed regularly. 2. Confirm that the phone is connected to wifi. First, make sure that the phone is connected to the wifi network whose password you want to change before changing the wifi password. 3. Open the phone’s settings menu and enter the phone’s settings menu.
