There are all kinds of problems in the mobile text box, not wandering can not find their own position is to lose the focus of the soft keyboard can not go back, strange strange problems are always a headache, the pain once calculate, can not time pain ah, then I will sum up, I hope to help you and he

1. In ios, when the input box gets the focus, the page input box is covered 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.

Scheme 1: In the application of scrollIntoView, the input box is displayed in the visual area.

3 inputOnFocus(e) {4 setTimeout(function(){// true: the top of the element will be aligned with the top of the visible area of the scroll area; False: Align the bottom. 5 e.target.scrollIntoView(true); 6, 7}, 200); // delay == keyboard to play time 8}Copy the code

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.

In this case, 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.

1 var timer; 2 // Set the element to position:static, set timer 3 inputOnFocus(e) {4 e.target.style.className = 'input input-static'; 5 the timer = setInterval (6 function () {7 document. The body. The scrollTop = document. Body. ScrollHeight 8}, 100), 9}; 10 / / input box loses focus, sets the element to the position: fixed, removing the timer 11 inputOnbulr (e) {12 e. arget. ParentNode. ClassName = 'input input - fixed';  13 clearInterval(timer) 14};Copy the code

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, maybe you’re creating a chat-like page and need to view history messages when replying, so please keep reading

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. (For other options, see point 6 below)

3. The cursor disappears or is misplaced when getting the focus:

-webkit-user-select:none Indicates that the input box cannot be entered in iOS and the cursor does not appear

user-select: text;
-webkit-user-select: text;
Copy the code

Use scrollIntoView to make the current element appear in the specified position, so as not to misplace the cursor:

e.target.scrollIntoView(true);  
e.target.scrollIntoViewIfNeeded();
Copy the code
4. How do I automatically get the focus and display the soft keyboard when I enter the page?

  • Added the autoFocus attribute to automatically get focus

  • Trigger the Focus () event

5. With the text input, the width of the input box is adaptive.
 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 x 8 English characters, testLength x 16 Chinese characters, and +10 is reserved for the following cursor position. This scheme is obviously not suitable for high precision requirements.

6. Describes a property called contenteditable, which dynamically obtains width and height when simulating input

(1) Div sets contentditable=true to make the element inputable.

<div  class="inputContent"  contenteditable="true" ></div>
Copy the code

(2) If you want to become an input field, use CSS to simulate the style of the input field

1 .inputContent{ 2 color: #444; 3 border: #999 solid 1px; 4 border-radius: 3px; 5 padding: 5px 10px; 6 box-sizing: border-box; 7 min-width: 50px; 8 max-width: 300px; 9 background: #ffffff; 10}Copy the code

Here with min-width, max-width effect is more realistic.

(3) Click div to pop up the soft keyboard, but you cannot input content. You need to set the properties as follows

.inputContent{
    user-select:text;
    -webkit-user-select:text;
}
Copy the code

This completes a system that can dynamically adjust the width and height based on the input taken.

(Here’s a GIF)

You can also emulate placeholder and so on with JS, which I won’t expand here

7. Other problems and solutions

  • Input box focus can pop up the soft keyboard, but no cursor flicker, can not normally input.

    -webkit-user-select:none

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

  • Input Custom style

    // use the placeholder class INPUT ::-webkit-input-placeholder, input::-moz-placeholder, input::-ms-input-placeholder {… style text-align: center; }

8. Patch: Recently, I encountered such a problem in the development of mobile terminal: after the input box in ios got the focus, the page was on the top of the web (there was nothing wrong with that). Embarrassingly, the page did not rebound after losing the focus, the top moved up, and there was a gray area at the bottom, so I needed to manually touch a place at will. Will bounce back.

Problem 1: The test said that interaction and experience were not good;

Problem 2: If the page has a UI frame popup window, the button inside the pop-up layer cannot be clicked when the page does not bounce back

Solution: Listen to the event of soft keyboard up and down, and perform corresponding operations

Mounted () {/ / soft keyboard closed event But where the global vue words such as App. Vue file add the following code document. The body. The addEventListener (' focusout ', Window.scrollto ({top: 0, left: 0, behavior: 'smooth'})})}Copy the code

9. On iphone11 Pro Max model, after the Chinese text box on the page loses the focus or after clicking “Finish” on the soft keyboard, the soft keyboard will disappear but still have a black background placeholder

Solutions:

Listen for all inputs on the page to lose focus

$("input").blur(function() {var u = navigator.userAgent; var isIOS = !! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/); if (isIOS){ setTimeout(() => { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight, 0)); }, 200); }}) $("input").blur(function() {var u = navigator.userAgent; var isIOS = !! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/); if (isIOS){ setTimeout(() => { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight, 0)); }, 200); }})}Copy the code

10. On Android phones, the text field is obscured when the soft keyboard bounces up

isAndroid() { window.addEventListener('resize', function() { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { window.setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); }, 0); }}); Value ={rtnDesc} onFocus={() => this.isandroid ()} > </textarea>Copy the code