Simulate the comment function of WeChat circle of friends, as shown in the figure:
First consider that the keyboard pushes the input box up so that the input box is just above the keyboard
Solution: fixed positioning, position the input box at the bottom of the page, when the keyboard rises, it will automatically lift the input box up
So there is such a demo:
There are a few details:
1. The bottom right corner of the keyboard defaults to the "Done" button instead of "Submit". Can be changed by setting the attribute confirm-type="send" of the input tag
2. The keyboard is close to the input box, covering the lower end of the wrapping layer of the input box. You can set cursor-spacing to change the distance between the cursor and the keyboard
3. When you click the blank space of the page and the close button of the input method, the input box should be hidden. This is a very interesting problem. It looks a bit complicated, but it is just an event that the input box is out of focus.
So we got a relatively perfect demo:
There is a serious problem: <input> is a single-line input box, but if you want to input multiple lines, you must use <textarea>. Then let's see how the label is replaced by a textarea:
The keyboard has an extra emoticon and a completion button that can kill obsessive-compulsive disorder, and the lower right corner is a "new line" instead of a "submit" button. I queried the api and found that for textarea tags, the default behavior of these keyboards cannot be changed.
So the label is changed back to input, so how to achieve multi-line input?
Let’s make a guess here. The wrapping layer of the input box is a <scroll-view>. When the single-line input box is input to the head (monitoring the input and calculating the cursor position), create a single-line input box and give the focus to the input box. In this way A multi-line input box composed of multiple single-line input boxes is formed. Finally, splice the text in all input boxes when you click Submit.
Is this method feasible? I think it's feasible, but I don't want to do it. That's right, keyboard warriors should be so confident.
The above is my exploration of the keyboard behavior of the WeChat applet, because my own level is limited, if you have any mistakes or have a better solution, please correct me.