How to Make an obedient "input box"

Preface

In mobile web development, when an input box is mentioned, programmers (yuan) must have a lot of slots.

In the use of the input box, I am also very tired ~

However, after my Qian (CAI) Heart (Keng) Research (Jiao) (Xun), I understand its temperament... ...

Special thanks: Zhou Han and Jia Xing

The text starts here ?? --------

Question 1. In iOS, when the input box gets the focus, the page input box is overwritten, And the positioning element location is disordered:

When the page input exists in the top or bottom element, the user clicks the input box. After the input method pops up, fiexd becomes invalid, and the positioned elements on the page scroll along with the screen.

To solve this problem, let's take a look at the following solutions:

Solution 1: web API interface: scrollintoview application. The input box is displayed in the visible area.

// When the input box gets the focus, the element moves to the visible area inputonfocus (e) {setTimeout (function () {e.tar get. scrollintoview (true); // true: the top of an element is aligned with the top of the visible area in the scroll area. False: the bottom is aligned. }, 200); // latency = It takes time to start the keyboard}

　　

A line of code is easy to handle, and the input box will appear in front of you.

However, there is a small flaw: When the page is too long, because the fixed is invalid, the input box will still slide along with the page.

In this case, we need a fixed input box ......

Solution 2: When you get the focus in the input box, slide the page to the bottom to avoid the page flying due to fixed and ensure that the input is at the bottom.

VaR timer; // when the input box gets the focus, set the element to position: static and timerinputonfocus (e) {e.tar get. style. classname = 'input-static '; timer = setinterval (function () {document. body. scrolltop = document. body. scrollheight}, 100)}; // when the input box loses focus, set the element to position: fixed to clear timerinputonbulr (e) {e.tar get. parentnode. classname = 'input-fixed'; clearinterval (timer )};

　　

Results:

,

After a virtual keyboard pops up, the input box keeps close to the top of the keyboard. If you do not need to slide to view other content after the input method is displayed on your page, you should be very interested in this solution.

But, maybe you are doing a chat-like page, website speed test, you need to view the historical message when replying, then, please continue to read

Solution 3: Split the page: Page (main) = content (sectiona) + input box (sectionb) + other (sectionother)

Principle:
Main. Height = Window. Screen. height;
Sectiona absolute positioning, internal rolling overflow-Y: Scroll;
Sectionb is always at the bottom of the page.

. Main {position: relative; Height: 100% ;}. sectiona {box-sizing: border-box; padding-bottom: 60px; Height: 100%; overflow-Y: Scroll;-WebKit-overflow-scrolling: touch // sectiona adds attributes for smooth scrolling }. sectionb {position: absolute; Height: 60px; overflow: hidden; left: 0; Right: 0; bottom: 0 ;}

　　

It is built with pure css3 and can be rolled and fixed to meet most layout requirements.

2. The input content in the single-line input box in IOS is long and cannot be displayed in full, and cannot slide left or right.

This is a bug in IOS. You can use textarea to replace input, set a row's height, rank, and scroll up and down to view. (For other solutions, refer to the 6th points below)

3. When the focus is obtained, the cursor disappears or is misplaced:

-WebKit-user-select: None: the input box cannot be entered in iOS, And the cursor does not appear. The settings are as follows:

user-select:text;-webkit-user-select:text;

　　

Use scrollintoview to make the current element appear at the specified position to avoid misplacement of the cursor. The settings are as follows:

e.target.scrollIntoView(true);  e.target.scrollIntoViewIfNeeded();

　　

4. On the page, how does one automatically obtain the focus and the keyboard pops up?

• You can add the autofocus attribute to automatically obtain the focus.
• Trigger the focus () event

5. The width of the input box is adaptive with the text input.

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

　　

This solution basically meets the requirement of automatic results acquisition.

Testlength8 English characters, testlength16 Chinese characters, + 10 reserved position for the cursor behind.
This solution obviously does not apply to requirements that require high accuracy.

6. Introduce a property: contenteditable, which dynamically obtains the width and height when simulating input.

(1) set contentditable = true for div to change this element to an input state.

<div  class="inputContent"  contenteditable="true" ></div>

　　

(2) To change to an input box, use CSS to simulate the style of the input box

.inputContent{  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, the Min-width and max-width effects are more realistic.

(3) Click Div to bring up the soft keyboard, but the content cannot be entered. You need to set the attributes as follows:

.inputContent{  user-select:text;  -webkit-user-select:text;}

　　

In this way, the width and height can be dynamically adjusted based on the obtained input content.

You can also use js to simulate placeholder and so on.

7. Other problems and solutions

• When the input box obtains the focus, a soft keyboard is displayed, without blinking the cursor.

  -WebKit-user-select: None

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

　　

• Input custom Style

// Use the pseudo class input:-WebKit-input-placeholder, input:-moz-placeholder, input:-MS-input-placeholder {... style text-align: center ;}

　　

Now, I want to help you.

There are still a lot of pitfalls in the input box, and this article will inevitably have a case of incomplete cover. You are welcome to leave a message to us and discuss it together.

We will continue to follow us and provide you with more excellent articles.

From: http://zzfe.org/#/detail/5a8e3e67e772cd17475c8c6b

How to Make an obedient "input box"