A relatively large textarea is defined in the mobile web page, which can display about 15 lines of words. When clicking the textarea, the input method pops up and covers a few lines of words at the bottom of the textarea, causing the number of words entered to exceed 10 lines. , the characters entered later were blocked by the input method, and turned into touch typing, which was a very poor experience.
Is there any way to solve this problem using js?
I just wrote a relatively stupid method, and found that only Samsung phones and Android 5.0 are compatible. Xiaomi, vivo and other messy phones don't recognize this method. I'm drunk. .
<textarea class="form_textarea" onfocus="textfocus(this)" onblur="textblur(this)" rows="" cols=""></textarea>
<script type='text/javascript'>
function textfocus(o){ o.style.position = 'fixed'; o.style.top = '50px'; o.style.zIndex = '999'; }
function textblur(o){ o.style.position = 'static'; o.style.top = 'auto'; }
</script>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
1. When the textarea receives the focus event, automatically scroll the text box to the top of the screen
2. The designed input box should not exceed half the screen. If it must exceed, the textarea has a change event, calculate how many words have been entered, and scroll the input box up accordingly
This should make it very friendly
Use fixed positioning, bottom