


How to develop verification code and password input box function in WeChat applet
This 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>
Page({ /** * 页面的初始数据 */ data: { Length:6, //输入框个数 isFocus:true, //聚焦 Value:"", //输入的内容 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); }, })
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

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

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

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

We usually receive PDF files from the government or other agencies, some with digital signatures. After verifying the signature, we see the SignatureValid message and a green check mark. If the signature is not verified, the validity is unknown. Verifying signatures is important, let’s see how to do it in PDF. How to Verify Signatures in PDF Verifying signatures in PDF format makes it more trustworthy and the document more likely to be accepted. You can verify signatures in PDF documents in the following ways. Open the PDF in Adobe Reader Right-click the signature and select Show Signature Properties Click the Show Signer Certificate button Add the signature to the Trusted Certificates list from the Trust tab Click Verify Signature to complete the verification Let

Passkey is a more advanced and secure way to log in and can be used with a Microsoft account. This article will guide you how to use Passkey in your Microsoft account, introduce its advantages and the differences with passwords. Before we get into the details, we emphasize that if you frequently forget your passwords or need to log in quickly, Passkey will generally be better for you. What is Passkey? How are they different from passwords? Passwords are an advanced and secure authentication method that can replace traditional password logins. Each application has a unique key, ensuring security and preventing threats like phishing. Users can confirm their identity via email and password, or use facial recognition, fingerprint or security key

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 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.

A few days ago, my cousin came to me to complain that he had worked hard to create a lot of data using Excel, but it was later modified by his colleagues. He didn't know the situation at the time. After sending it to his boss, he was scolded. This is really frustrating. Some people just don’t like you and want to deliberately punish you. After you leave school and enter society, you will find that more and more people are stabbing you in the back. In addition to a few words of comfort to my cousin, I also gave my cousin an advice. If you are afraid of encountering such a thing again in the future, then set a password for the excel form so that no one can open it except you. Netizens, if you are afraid that your Excel spreadsheet will be secretly modified by others, you should also set a password. How to set password for excel password form? Come with me to find out! 1.
