前言

在此介绍的是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. 轻装上阵Flink--在IDEA上开发基于Flink的实时数据流程序

    前言 本文介绍如何在IDEA上快速开发基于Flink框架的DataStream程序.先直接上手! 环境清单 案例是在win7运行.安装VirtualBox,在VirtualBox上安装Centos操作 ...

  2. js Vquery

    // JavaScript Document function myAddEvent(obj,sEv,fn){ alert('fn:'+fn); if(obj.attachEvent){ obj.at ...

  3. Pyppeteer入门（转载）

    一.简介 Puppeteer 是 Google 基于 Node.js 开发的一个工具,有了它我们可以通过 JavaScript 来控制 Chrome 浏览器的一些操作,当然也可以用作网络爬虫上,其 A ...

  4. 2016 Multi-University Training Contest 1 T3

    题目要求出所有合法点对间的最短路径的平均值,因此我们应当求出所有合法最短点对的最 短路径之和,再除以合法点对个数. 题目中Guard之间有着很不自然的制约关系,每个Guard的周围和同行.列都不能有其 ...

  5. kerberos系列之hdfs&yarn认证配置

    一.安装hadoop 1.解压安装包重命名安装目录 [root@cluster2_host1 data]# tar -zxvf hadoop-2.7.1.tar.gz -C /usr/local/ [ ...

  6. 都2020年了 还要学JSP吗？

    前言 2020年了,还需要学JSP吗?我相信现在还是在大学的同学肯定会有这个疑问. 其实我在18年的时候已经见过类似的问题了「JSP还应该学习吗」.我在18年发了几篇JSP的文章,已经有不少的开发者评 ...

  7. 【WebGL】WebGL API 详解

    基于 WebGL Specifications 最全面的API释疑. 类型以及对象定义 这部分内容主要定义一部分类型和数据结构. typedef unsigned long GLenum; typed ...

  8. Symantec NBU :Unable to retrieve version of the server xxx.xxx.xxx

    Symantec NetBackup  是赛门铁克收购的veritas公司的一款产品,该产品功能强大,据称堪称备份界的鼻祖. 其具体原理和备份方式可见:https://blog.51cto.com/s ...

  9. Error: clean-webpack-plugin only accepts an options object. See: https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional

    webpack中文文档中推荐这样使用,but 执行npm run build Error: clean-webpack-plugin only accepts an options object. S ...

  10. TensorFlow 多元线性回归【波士顿房价】

    1数据读取 1.1数据集解读 1.2引入包 %matplotlib notebook import tensorflow as tf import matplotlib.pyplot as plt i ...