search

Home  >  Q&A  >  body text

angular.js - How to solve the problem of input method blocking text box on mobile web?

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>


漂亮男人漂亮男人2818 days ago824

reply all(2)I'll reply

  • 巴扎黑

    巴扎黑2017-05-15 16:54:01

    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

    reply
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-15 16:54:01

    Use fixed positioning, bottom

    reply
    0
  • Cancelreply