前言

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

需求

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

效果:只显示英文键盘。

遇到的问题

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

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

解决

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

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

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

.flickerPosition

{

  position: absolute;

  left: 0px;

}


function showtxt(e)

{

  document.getElementById('showtxt').innerHTML=e.srcElement.value;

  console.log();

}


<div class="main">

<div class="showtxt flickerPosition" id="showtxt">

  //显示input信息的地方

</div>

<input type="password" oninput="showtxt(event)" style='color:rgba(255, 255, 255, 0);caret-color:black;'>

</div>

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

但是这么做是有问题的。

问题如下:

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

那么如何解决呢?

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

*{

  margin: 0px;

  padding: 0px;

}

.flicker {

  -webkit-animation: twinkling 1s infinite ease-in-out

}

.flickerPosition

{

  position: absolute;

  left: 0px;

}

@-webkit-keyframes twinkling {

  0% {

	opacity: 0;

  }

  100% {

	opacity: 1;

  }

}

@keyframes twinkling {

  0% {

	opacity: 0;

  }

  100% {

	opacity: 1;

  }

}

.flickerPosition,input{

  font-size: 16px;

  padding: 5px 0px 5px 5px;

  display: inline-block;

}

.flickerPosition{

  font-size:0px;

}

.showtxt

{

  font-size: 16px;

}


<div class="main">

<div class="flickerPosition" >

  <span class="showtxt" id="showtxt">

  </span>

  <span class="flicker" style="font-size: 18px;visibility: hidden;">

  |

</span>

</div>

<input type="password" oninput="showtxt(event)" style='color:rgba(255, 255, 255, 0);' onfocus="outhtml(event)" onblur="inhtml(event)">

</div>


function outhtml(e) {

  var flicker= document.getElementsByClassName('flicker')[0];

  flicker.style.visibility='visible';

}

function inhtml(e) {

  var flicker= document.getElementsByClassName('flicker')[0];

  flicker.style.visibility='hidden';

}

效果:

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

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

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

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

<div class="main">

<div class="flickerPosition">

  <span class="showtxt" id="showtxt">

  </span>

  <span class="flicker" style="font-size: 18px;visibility: hidden;">

	|

  </span>

</div>

<input type="password" id="target" oninput="showtxt(event)" onfocus="outhtml(event)" onblur="inhtml(event)"

  style='color:rgba(255, 255, 255, 0);position:absolute;left: -9999px;'>

<input type="text"  onfocus="changeFocusTarget()" name="username">

</div>

转移焦点。

function changeFocusTarget()

{

   document.getElementById('target').focus();

}

完整版

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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    * {

      margin: 0px;

      padding: 0px;

    }

    .flicker {

      -webkit-animation: twinkling 1s infinite ease-in-out

    }

    .flickerPosition {

      position: absolute;

      left: 0px;

    }

    @-webkit-keyframes twinkling {

      0% {

        opacity: 0;

      }

      100% {

        opacity: 1;

      }

    }

    @keyframes twinkling {

      0% {

        opacity: 0;

      }

      100% {

        opacity: 1;

      }

    }

    .flickerPosition,

    input {

      font-size: 16px;

      padding: 5px 0px 5px 5px;

      display: inline-block;

    }

    .flickerPosition {

      font-size: 0px;

    }

    .showtxt {

      font-size: 16px;

    }

  </style>

  <script>

    function showtxt(e) {

      document.getElementById('showtxt').innerHTML = e.srcElement.value;

      console.log();

    }

    function outhtml(e) {

      var flicker= document.getElementsByClassName('flicker')[0];

      flicker.style.visibility='visible';

      e.srcElement.style.visibility = 'hidden';

    }

    function inhtml(e) {

      var flicker= document.getElementsByClassName('flicker')[0];

      flicker.style.visibility='hidden';

    }

    function changeFocusTarget()

    {

       document.getElementById('target').focus();

    }

  </script>

</head>

<body>

  <div class="main">

    <div class="flickerPosition">

      <span class="showtxt" id="showtxt">

      </span>

      <span class="flicker" style="font-size: 18px;visibility: hidden;">

        |

      </span>

    </div>

    <input type="password" id="target" oninput="showtxt(event)" onfocus="outhtml(event)" onblur="inhtml(event)"

      style='color:rgba(255, 255, 255, 0);position:absolute;left: -9999px;'>

    <input type="text"  onfocus="changeFocusTarget()" name="username">

  </div>

</body>

</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. 一文掌握Redis的三种集群方案

    在开发测试环境中,我们一般搭建Redis的单实例来应对开发测试需求,但是在生产环境,如果对可用性.可靠性要求较高,则需要引入Redis的集群方案.虽然现在各大云平台有提供缓存服务可以直接使用,但了解一 ...

  2. SpringBoot——Cache使用原理及Redis整合

    前言及核心概念介绍 前言 本篇主要介绍SpringBoot2.x 中 Cahe 的原理及几个主要注解,以及整合 Redis 作为缓存的步骤 核心概念 先来看看核心接口的作用及关系图: CachingP ...

  3. 【学习参考】Animate.css动画演示

    学习参考地址: http://www.dowebok.com/demo/2014/98/

  4. java-选中排序（新手）

    //排序 选择排序 数组中每个元素都进行比较public class Test { //公共静态的主方法. public static void main(String[] args) { //创建一 ...

  5. Natas11 Writeup（常见编码、异或逆推、修改cookie）

    Natas11: 页面提示cookie被异或加密保护,查看源码,发现了一个预定义参数和三个函数. //预定义参数,猜测将showpassword设置为yes即可得到密码. $defaultdata = ...

  6. Worktile 进军软件开发与协作的初心与野心

    作为国内领先的企业协作工具,过去6年Worktile经历了中国SaaS跌宕起伏的蛮荒时代.当国内2C领域逐步布局成熟,巨头和资本也逐步将目光聚焦在2B这个万亿级大赛道,疫情期间和之后,都将加速企业服务 ...

  7. 后端开发使用pycharm的技巧

    后端开发使用pycharm的技巧 目录 后端开发使用pycharm的技巧 1.使用说明 2.database 3.HTTP Client 1.使用说明 首先说明,本文所使用的功能为pycharm专业版 ...

  8. [gcd]Codeforces Common Divisors

    Common Divisors time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  9. 企业级自动化部署方案——ansible实现tomcat自动安装和配置

    共耗时10多个小时 思路一 总体设计 ansible-playbook目录结构 [root@ansible ~]# tree /etc/ansible/roles/tomcat /etc/ansibl ...

  10. JSON字符串带BOM头"ufeff"

    调用三方接口返回值JSON字符串带BOM头"\ufeff",JSON解析死活报错. 我是用SpringBoot的RestTemplate调用三方接口的,一开始返回值我是用对象接收返 ...