In our programmer’s daily work, often encounter some annoying slots, xiaobian is often encountered, today to share with you how to make input box obedient skills.

To explore problems

  1. In ios, when the input box gets focus, the page input box is obscured and the location of the element is wrong:

When the page input exists in the top or bottom element, the user clicks the input box, the input method pops up, fiEXD fails, and the positioned element in the page scrolls along with the screen. To solve this problem, let’s look at the following solutions: Solution 1: Web API interface: Application of scrollIntoView, display the input box in the visual area. JavaScript

// When the input box gets focus, the element moves to the viewable areaCopy the code

inputOnFocus(e) { setTimeout(function(){ e.target.scrollIntoView(true); // true: The top of the element is aligned with the top of the visible area of the scroll area in which it is located; False: Align the bottom. }, 200); // delay == it takes time for the keyboard to bounce} one line of code, easy to handle, the input box will appear in front of your eyes. However, there is a slight flaw: when the page is too long, due to fixed failure, the input box will still slide along the page. At this point, we need a fixed input box… Solution 2: When the input box gets focus, slide the page to the bottom to avoid the page flying caused by Fixed, and ensure that the input is at the bottom. JavaScript

Var timer;Copy the code

// Set the element to position:static, set timer inputOnFocus(e) {e.target.style.classname = ‘input input-static’; The timer = setInterval (function () {document. The body. The scrollTop = document. Body. ScrollHeight}, 100)}; / / input box loses focus, the element is set to the position: fixed, removing the timer inputOnbulr (e) {e. arget. ParentNode. ClassName = ‘input input – fixed’; ClearInterval (timer)}; The effect is shown below:

When the virtual keyboard pops up with focus, the input box stays glued to the top of the keyboard. If you don’t need to scroll to see other content after the input method pops up, you should be happy with this solution. But, if you are creating a chat-like page and need to view history messages when replying, then please continue to look at solution 3: Split the page: Main = content (sectionA) + input (sectionB) + Other (sectionOther) SectionA absolute position, inner overflow-y: scroll; SectionB is guaranteed to be at the bottom of the page. CSS

.main { position: relative; height: 100%; } 
Copy the code

.sectionA { box-sizing: border-box; padding-bottom: 60px; height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch}. SectionB {position: absolute; height: 60px; overflow: hidden; left: 0; right: 0; bottom: 0; } pure CSS3 build, can roll, can fix the position, basically meet most layout needs. 2. The input content of the single-line input box in IOS is long and covered, so it cannot be displayed completely and cannot be swiped left and right. This is an IOS bug. Consider replacing the input with a textarea, setting the height of the line, and scrolling up and down. -webkit-user-select: None If the input box cannot be entered in IOS and the cursor does not appear, set JavaScript as follows

user-select:text;
Copy the code

-webkit-user-select:text; Use scrollIntoView to make the current element appear in the specified position, so as not to misplace the cursor: JavaScript e.target.scrollintoView (true); e.target.scrollIntoViewIfNeeded(); 4. How do I automatically get the focus and display the soft keyboard when I enter the page? • Added autofocus attribute support to automatically get focus • Trigger Focus () event 5. With the text input, input box width adaptive. JavaScript

  onkeyPress(e) {
const testLength = e.target.value.length;
e.target.style.width = `${testLength*8+10}px`
Copy the code

} This scheme basically satisfies the automatic acquisition effect. TestLength 8 contains English characters, testLength 16 contains Chinese characters, and +10 is reserved for the following cursor position. This scheme is obviously not suitable for high precision requirements. (1) Div sets contentditable=true to change this element into an inputable state.

1 

.inputContent{
Copy the code

color:#444; border:#999 solid 1px; border-radius: 3px; padding: 5px 10px; box-sizing: border-box; min-width:50px; max-width: 300px; background: #ffffff; } here with min-width, max-width effect is more realistic. CSS. InputContent {user-select:text; css.inputContent {user-select:text; -webkit-user-select:text; } This completes a system that can dynamically adjust the width and height based on the input. You can also emulate placeholder and so on with JS, so I’m not going to expand 7. • When the input box is in focus, the soft keyboard pops up, but the cursor does not blink, and the input cannot be normal. -webkit-user-select:none. The CSS can be resolved in this way

*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
Copy the code

} • Input custom style CSS

// Use pseudo classesCopy the code

input::-webkit-input-placeholder, input::-moz-placeholder, input::-ms-input-placeholder { … style text-align: center; } well, wrote this, hope to see after you can help. Don’t forget to share with your friends to learn together, and be sure to stay tuned as the little Ape circle continues to share articles about web learning.