触屏版类似刷新页面文本框获取焦点的同时弹出手机键盘的做法

手机触屏版想要自动弹出键盘要满足的三个条件:

1、文本框获取焦点

2、手触屏该页面的屏幕

3、无延迟

实现实例(类似微信微博):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
    .page{
        width:100%;
        height:400px;
        background:#333;
        overflow:hidden;
    }
    .page a{
        display: block;
        width:50px;
        height:50px;
        margin:100px auto;
    }
    .com {
        display: none;
        width:100%;
        height:500px;
        overflow:hidden;
    }
    .com textarea{
        display: block;
        width:90%;
        height:200px;
        margin:50px auto;
    }
</style>
<body>
     <div class="page">
         <a href="javascript:void(0);">评论</a>
     </div>


     <div class="com">
         <textarea></textarea>
     </div>
</body>
<script>
      $(‘.page a‘).on(‘click‘,function(){
          $(‘.page‘).hide()
          $(‘.com‘).show()
          $(‘.com textarea‘).focus()
      })
      
</script>

</html>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。