前言

在此介绍的是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. 使用StreamHttpResponse和FileResponse下载文件的注意事项及文件私有化

    为什么需要编写下载视图方法? 你或许知道,我们上传的文件默认放在media文件夹中的,且Django会为每个上传的静态文件分配一个静态url.在模板中,你可以使用{{ mymodel.file.url ...

  2. 【Linux】linux系统管理---好用的一些开源工具

    目录 linux系统管理---好用的一些开源工具 htop dstat Glances iftop nethogs iotop linux系统管理---好用的一些开源工具 htop htop是一款运行 ...

  3. 使用PageHelper插件分页时，如何对对象进行转换以及添加属性

    一.插件介绍 PageHelper是针对Mybaits的分页插件,支持任何复杂的单表.多表分页. 二.基本用法 以springboot为例,有两种方式配置,一种是传统的,引入依赖,编写配置类:一种是使 ...

  4. 基于 HTML5 WebGL 与 GIS 的智慧机场大数据可视化分析

    前言:大数据,人工智能,工业物联网,5G 已经或者正在潜移默化地改变着我们的生活.在信息技术快速发展的时代,谁能抓住数据的核心,利用有效的方法对数据做数据挖掘和数据分析,从数据中发现趋势,谁就能做到精 ...

  5. git常用命令学习配详细说明

    原文链接 把当前目录变成Git可以管理的仓库 git init 查看仓库当前的状态 git status 添加新/变动文件 git add <文件名> // 添加某个新文件(目录) git ...

  6. springBoot mybatis mysql pagehelper layui 分页

    <!-- 加入 pagehelper 分页插件 jar包--><dependency> <groupId>com.github.pagehelper</gro ...

  7. ECCV 2018 目标检测 | IoU-Net：将IoU的作用发挥到极致

    常见的目标检测算法缺少了定位效果的学习,IoU-Net提出IoU predictor.IoU-guided NMS和Optimization-based bounding box refinement ...

  8. Django 配置使用日志

    一. Django中使用日志 Django中使用日志其实非常简单,只需要在项目使用的配置文件中(如果没有自定义,那么就是settings.py中)加以下设置即可,同时可以根据自己的需求进行修改: # ...

  9. 基础的Linux命令（二）

    本文介绍两大类命令,都是最基础的部分 系统状态监测命令 工作目录切换命令 一.系统状态监测命令 1. ifconfig 命令 用于获取网卡配置与网络状态等信息 如下图:inet后面是 IP 地址,et ...

  10. 凸包问题 Graham Scan

    2020-01-09 15:14:21 凸包问题是计算几何的核心问题,并且凸包问题的研究已经持续了好多年,这中间涌现出了一大批优秀的算法. 凸包问题的最优解法是Graham Scan算法,该算法可以保 ...