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

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

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>

时间: 2024-11-15 19:35:50

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

HTML5页面,用JS 禁止弹出手机键盘

用户点击input的时候: 会默认调出手机软键盘: 场景:文本框获取焦点时,需要禁止手机弹出自带的输入键盘: 解决方案1: 用一个p/div等标签显示内容:然后放一个隐藏的input: (可能的场景:当扫描二维码或者别的操作时候,JS赋值隐藏的input值和显示的文本:) (可能的场景:当用户点击输入框,调出自定义的日期软键盘或者数字输入键:阻止自带输入键盘的弹出) 这种解决方案,因为当用户点击的时候,因为点击的是p之类的标签,所以也不会弹出: 解决方案2: $form.on("focus&qu

文本框获取焦点时,光标出现在文本末尾

最近遇到一个问题,点击编辑,才能修改一个文本框的内容,文本框自动获取光标,但是光标总是出现在文本框最前面,如图: 光标一直出现在 '1' 的前面,咨询了百度之后,通过 js 来实现: html 代码: <input type="text" id="test" value="123456879"> <input type="button" id="focus" value="编辑&

(转)完美解决 Android WebView 文本框获取焦点后自动放大有关问题

完美解决 Android WebView 文本框获取焦点后自动放大问题 前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本框聚焦时,网页面会放大(他们用三星手机测试的) 网上查了好久参考他的方法加上去测试 http://www.cppblog.com/guojingjia2006/archive/2012/12/18/196429.html 下面我将原文copy过来 **************************

完美解决 Android WebView 文本框获取焦点后自动放大问题

前几天在写一个项目时,要求在项目中嵌入一个WebView 本来很快就完成了,测试也没有问题.但发给新加坡时,他们测试都会出现文本框聚焦时,网页面会放大(他们用三星手机测试的) 网上查了好久参考他的方法加上去测试 http://www.cppblog.com/guojingjia2006/archive/2012/12/18/196429.html 下面我将原文copy过来 **************************************************************

淘宝网触屏版 - 学习笔记(1 - 关于meta)

注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta

WebApp触屏版网站开发要点

所谓的触屏版网站其实也是WebApp的一种展示形式,主要是依赖HTML+CSS+Javascript这三个关键因素来实现,相比较原生客户端程序来说优点就是开发周期短.升级简单.维护成本低,因为从根本上来说WebApp的本质就是一个网站而已.这里就说一下如何开发一个适合在触屏设备上展示的页面. 如果有在PC端开发网页的基础那么去处理手机端就很容易上手,这里介绍的是针对手持设备专门处理的页面,而不是媒体查询那种展示方式. 这里提供几个meta属性 使页面不可以认为放大缩小,喜欢用手指捏来捏去的童鞋要

WAP、触屏版网站及APP的区别

 1.电脑版网站: 电脑版网站是指用户通过台式或者笔记本电脑浏览器打开的网站,也就是我们平时上网所访问的网站.其支持和兼容IE6.IE7.IE8.IE9.IE10.Firefox.Chrome等各种主流浏览器,该网站通常包含一些网站应用程序及系统(如:CMS网站内容管理系统等),并包含了独立的数据库及完整的后台管理系统,是企业开展网络营销和电子商务的基础. 为了管理和维护方便,其手机WAP版网站.手机触屏版网站.手机APP应用等通常共享同一个数据库和管理后台. 2.手机WAP版网站: WAP网站

问卷调查 for Html5触屏版

什么是Html5触屏版? 采用最新HTML5技术,无需下载安装.无需下载升级,使用移动设备浏览器,就能访问自适应屏幕大小的访问界面,微信也能扫描访问. 为什么已经有PC网页版和移动端APP版还需要Html5触屏版? 首先PC网页版是基于传统PC上的浏览器使用,在移动浏览器上会出现屏幕大小伸缩,不适合在移动终端浏览器上使用. 而移动端APP版需要按照才能使用,基于Html5触屏版使用手机浏览器就能访问. Html5触屏版与传统的手机wap网页的区别? 传统的wap网页更适合之前的功能机,html5

淘宝网触屏版 - 学习笔记(0 - 关于dpr)

注:本文是学习笔记,并不是教程,所以会有很多我不理解或猜测的问题,也会有不尽详实之处,望见谅. 对于pc端网页设计师来说,移动端的网页制作,我之前只是简单的加了一个 <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=none"> 然后再根据实际预览效果,对一些比例或者清晰度问题进行调整,以达到最佳效果.当然