前言

在此介绍的是h5的部分，非原生，原生可以直接属性禁止。

需求

禁止中文出现在input中。(如果你认为不显示出来中文，那么请往下看)

效果:只显示英文键盘。

遇到的问题

1.在三星低版本上会出现:比如说输入f,然后输入n，下次输入f的时候，会出现fnf。这个可以清楚缓存禁止。

2.如果你的app在多个国家运行，那么你禁止中文输入往往是不够的，因为别人认为他们明明输入了，但是没有显示出来。如何能够只让它显示英文键盘呢？

解决

那么问题就回到了如何让它只显示英文键盘上。这时候我想到的就是password输入框。

这时候遇到的问题就是password输入框，全是***,显示不了正常文。

解决是拿到password的输入内容显示出来。

  1. .flickerPosition
  2. {
  3.   position: absolute;
  4.   left: 0px;
  5. }
  1. function showtxt(e)
  2. {
  3.   document.getElementById('showtxt').innerHTML=e.srcElement.value;
  4.   console.log();
  5. }
  1. <div class="main">
  2. <div class="showtxt flickerPosition" id="showtxt">
  3.   //显示input信息的地方
  4. </div>
  5. <input type="password" oninput="showtxt(event)" style='color:rgba(255, 255, 255, 0);caret-color:black;'>
  6. </div>

我的开始的思想是让input里面的内容不显示出来，然后在它上面覆盖一层div，显示内容。

但是这么做是有问题的。

问题如下:

光标的位置不对，造成的原因很简单，是因为*的占用的位置比字母下，所以光标往往就在我们输入的最后一个位置的左边。

那么如何解决呢?

问题出在光标上，那么就解决光标, 光标我不要了，自己实现光标。

  1. *{
  2.   margin: 0px;
  3.   padding: 0px;
  4. }
  5. .flicker {
  6.   -webkit-animation: twinkling 1s infinite ease-in-out
  7. }
  9. .flickerPosition
  10. {
  11.   position: absolute;
  12.   left: 0px;
  13. }
  14. @-webkit-keyframes twinkling {
  15.   0% {
  16. 	opacity: 0;
  17.   }
  19.   100% {
  20. 	opacity: 1;
  21.   }
  22. }
  23. @keyframes twinkling {
  24.   0% {
  25. 	opacity: 0;
  26.   }
  28.   100% {
  29. 	opacity: 1;
  30.   }
  31. }
  32. .flickerPosition,input{
  33.   font-size: 16px;
  34.   padding: 5px 0px 5px 5px;
  35.   display: inline-block;
  36. }
  37. .flickerPosition{
  38.   font-size:0px;
  39. }
  40. .showtxt
  41. {
  42.   font-size: 16px;
  43. }
  1. <div class="main">
  2. <div class="flickerPosition" >
  3.   <span class="showtxt" id="showtxt">
  4.   </span>
  5.   <span class="flicker" style="font-size: 18px;visibility: hidden;">
  6.   |
  7. </span>
  8. </div>
  9. <input type="password" oninput="showtxt(event)" style='color:rgba(255, 255, 255, 0);' onfocus="outhtml(event)" onblur="inhtml(event)">
  10. </div>
  1. function outhtml(e) {
  2.   var flicker= document.getElementsByClassName('flicker')[0];
  3.   flicker.style.visibility='visible';
  4. }
  5. function inhtml(e) {
  6.   var flicker= document.getElementsByClassName('flicker')[0];
  7.   flicker.style.visibility='hidden';
  8. }

效果:

思路非常简单，就是实现光标的效果，让它在input focus的时候出现，blur 的时候消失。

请往下看下去，因为涉及到兼容问题。

在ios中，低版本的光标无法用color，或者caret-color 透明。

兼容应该在让这个password不出现在我们的视野中。

  1. <div class="main">
  2. <div class="flickerPosition">
  3.   <span class="showtxt" id="showtxt">
  4.   </span>
  5.   <span class="flicker" style="font-size: 18px;visibility: hidden;">
  6. 	|
  7.   </span>
  8. </div>
  9. <input type="password" id="target" oninput="showtxt(event)" onfocus="outhtml(event)" onblur="inhtml(event)"
  10.   style='color:rgba(255, 255, 255, 0);position:absolute;left: -9999px;'>
  11. <input type="text"  onfocus="changeFocusTarget()" name="username">
  12. </div>

转移焦点。

  1. function changeFocusTarget()
  2. {
  3.    document.getElementById('target').focus();
  4. }

完整版

我当时写的demo，仅供参考。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     * {
  10.       margin: 0px;
  11.       padding: 0px;
  12.     }
  14.     .flicker {
  15.       -webkit-animation: twinkling 1s infinite ease-in-out
  16.     }
  18.     .flickerPosition {
  19.       position: absolute;
  20.       left: 0px;
  21.     }
  23.     @-webkit-keyframes twinkling {
  24.       0% {
  25.         opacity: 0;
  26.       }
  28.       100% {
  29.         opacity: 1;
  30.       }
  31.     }
  33.     @keyframes twinkling {
  34.       0% {
  35.         opacity: 0;
  36.       }
  38.       100% {
  39.         opacity: 1;
  40.       }
  41.     }
  43.     .flickerPosition,
  44.     input {
  45.       font-size: 16px;
  46.       padding: 5px 0px 5px 5px;
  47.       display: inline-block;
  48.     }
  50.     .flickerPosition {
  51.       font-size: 0px;
  52.     }
  54.     .showtxt {
  55.       font-size: 16px;
  56.     }
  57.   </style>
  58.   <script>
  59.     function showtxt(e) {
  60.       document.getElementById('showtxt').innerHTML = e.srcElement.value;
  61.       console.log();
  62.     }
  63.     function outhtml(e) {
  64.       var flicker= document.getElementsByClassName('flicker')[0];
  65.       flicker.style.visibility='visible';
  66.       e.srcElement.style.visibility = 'hidden';
  67.     }
  68.     function inhtml(e) {
  69.       var flicker= document.getElementsByClassName('flicker')[0];
  70.       flicker.style.visibility='hidden';
  71.     }
  72.     function changeFocusTarget()
  73.     {
  74.        document.getElementById('target').focus();
  75.     }
  76.   </script>
  77. </head>
  79. <body>
  80.   <div class="main">
  81.     <div class="flickerPosition">
  82.       <span class="showtxt" id="showtxt">
  83.       </span>
  84.       <span class="flicker" style="font-size: 18px;visibility: hidden;">
  85.         |
  86.       </span>
  87.     </div>
  88.     <input type="password" id="target" oninput="showtxt(event)" onfocus="outhtml(event)" onblur="inhtml(event)"
  89.       style='color:rgba(255, 255, 255, 0);position:absolute;left: -9999px;'>
  90.     <input type="text"  onfocus="changeFocusTarget()" name="username">
  91.   </div>
  92. </body>
  93. </html>

总结

该方案，在ios和android 混合app上暂时没有发现问题。然后呢，虽然看起来麻烦，但是在vue或者angular中实现非常简单，而且可以做成组件。

混合app禁止切换输入法英文键盘方案的更多相关文章

  1. 谈谈混合 App Web 资源的打包与增量更新

    综述 移动 App 的运行环境具有带宽不稳定,流量收费,启动速度比较重要等特点,所以混合 App 如何加载 Web 资源并不是一个新问题.本文目的是总结出一种资源打包下载的思路和方案,并且提供一种打包 ...

  2. Unity iOS混合开发界面切换思路

    Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...

  3. Appium python自动化测试系列之混合app实战（十一）

    12.1 什么是混合App 12.1.1 混合app定义 什么是混合app,其实这个不言而喻,我们的app正常来说应该都是native的,但是实际工作中却不是,反正种种原因我们的app会有native ...

  4. 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享

    什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...

  5. 在 Visual Studio 等编辑器/IDE中自动切换输入法，不需要手动的有没有？

    使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...

  6. 教你一招：Win10切换输入法与Win7一样（Ctrl + 空格）

    对于win10的朋友,大部分人对输入法都不习惯,如果你把英语输入法删除了,在中文输入法里没有美式键盘,让ctrl+空格与ctrl+Shift都能在搜狗输入法和美式键盘切换.下面小编就教你怎么让Win1 ...

  7. Xamarin开发IOS笔记：切换输入法时输入框被遮住

    在进行IOS开发的过程中,出现类似微信朋友圈的交互界面,当用户遇到感兴趣的内容可以进行评论.为了方便评论输入,当出现评论输入框的时候自动将评论输入框移动至键盘的上方,这样方便边输入边查看. 当用户隐藏 ...

  8. 混合App 框架选型

    个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app. ...

  9. 新安装的ubuntu系统如何设置中文输入法的方案

    本文是本人写的第一篇的linux博客,因为很菜,所以就把刚才自己安装中文输入法的过程给大家介绍一下,希望有所帮助. 1.首先,打开命令终端,两种方式,在Dash里面输入terminal然后enter, ...

随机推荐

  1. [转] SQL Server 数据库性能优化

    分析比较执行时间计划读取情况 1. 查看执行时间和cpu set statistics time on select * from Bus_DevHistoryData set statistics ...

  2. Python数据基本类型3

    -*- coding:utf-8 -*-字典 键值对数据 dict dic = {'键':'值'}存储数据 字典的查找快一些不可哈希的,就是可变的数据 可变的数据不能哈希 不可变的数据能哈希 pyth ...

  3. ES6： let 与 const

    ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const. let 声明的变量只在 let 命令所在的代码块内有效. const 声明一个只读的常量,一旦声明 ...

  4. 关于emgucv控制多摄像头问题

    看到这篇文章你或许已经查阅很多资料,也可能你刚准备深入研究,但是关于调用多摄像头问题我要说明一点,关于多摄像头调用 取决于你电脑本身USB控制器数量,不是说你电脑上5个usb就可以同时控制5台摄像头, ...

  5. C# 基础知识系列- 1 数据类型

    常见数据类型 C#的类型一般分为值类型.引用类型两大类型. 值类型的实例存放在栈中,引用类型会在栈中放置一个指针指向堆中的某一块内容. C#为我们内置了几个数据类型供我们使用: 关键词简写 对应的类全 ...

  6. 2020kali浏览器汉化等配置

    0.修改搜索引擎 1. 2. 3.点击左侧搜索,输入language因为我已经修改为中文所以没有查询到结果 4点击搜索更多语言(未汉化未英文)找到chinese后添加 5.要将chinese上移到第一 ...

  7. [ICRA 2019]Multi-Task Template Matching for Object Detection, Segmentation and Pose Estimation Using Depth Images

    简介         本文作者提出新的框架(MTTM),使用模板匹配来完成多个任务,从深度图的模板上找到目标物体,通过比较模板特征图与场景特征图来预测分割mask和模板与检测物体之间的位姿变换.作者提 ...

  8. [快速幂]Codeforces Round #576 (Div. 2)-C. MP3

    C. MP3 time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  9. Hive常用的10个系统函数及作用

    聚合函数 函数处理的数据粒度为多条记录. sum()—求和 count()—求数据量 avg()—求平均直 distinct—求不同值数 min—求最小值 max—求最人值 分析函数 Analytic ...

  10. springboot使用swagger2创建文档

    一.导入swagger2依赖 <dependency> <groupId>io.springfox</groupId> <artifactId>spri ...