混合app禁止切换输入法英文键盘方案
前言
在此介绍的是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禁止切换输入法英文键盘方案的更多相关文章
- 谈谈混合 App Web 资源的打包与增量更新
综述 移动 App 的运行环境具有带宽不稳定,流量收费,启动速度比较重要等特点,所以混合 App 如何加载 Web 资源并不是一个新问题.本文目的是总结出一种资源打包下载的思路和方案,并且提供一种打包 ...
- Unity iOS混合开发界面切换思路
Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...
- Appium python自动化测试系列之混合app实战（十一）
12.1 什么是混合App 12.1.1 混合app定义 什么是混合app,其实这个不言而喻,我们的app正常来说应该都是native的,但是实际工作中却不是,反正种种原因我们的app会有native ...
- 使用Webpack+Gulp开发运行于Dcloud平台HTML5+引擎的混合APP项目经验分享
什么是5+Runtime? 首先简单介绍一下5+Runtime: HTML5 Plus Runtime(5+Rumtime)是由Dcloud开发的一套"增强版的手机浏览器引擎",与 ...
- 在 Visual Studio 等编辑器/IDE中自动切换输入法，不需要手动的有没有？
使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...
- 教你一招：Win10切换输入法与Win7一样（Ctrl + 空格）
对于win10的朋友,大部分人对输入法都不习惯,如果你把英语输入法删除了,在中文输入法里没有美式键盘,让ctrl+空格与ctrl+Shift都能在搜狗输入法和美式键盘切换.下面小编就教你怎么让Win1 ...
- Xamarin开发IOS笔记：切换输入法时输入框被遮住
在进行IOS开发的过程中,出现类似微信朋友圈的交互界面,当用户遇到感兴趣的内容可以进行评论.为了方便评论输入,当出现评论输入框的时候自动将评论输入框移动至键盘的上方,这样方便边输入边查看. 当用户隐藏 ...
- 混合App 框架选型
个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app. ...
- 新安装的ubuntu系统如何设置中文输入法的方案
本文是本人写的第一篇的linux博客,因为很菜,所以就把刚才自己安装中文输入法的过程给大家介绍一下,希望有所帮助. 1.首先,打开命令终端,两种方式,在Dash里面输入terminal然后enter, ...
随机推荐
- 开源项目在闲鱼、b 站上被倒卖？这是什么骚操作？
起因 - 又是一封邮件 2020 年 3 月 2 日,收到了一封邮件,对,这次故事的起因又是一封邮件,和上次写个bug被国家信息安全漏洞共享平台抓到了一样. 这是一条评论通知邮件,一开始我以为只是正常 ...
- HTML5&CCS3（2） 处理网页文件
2.1 规划网站 为什么要创建这个站点,需要展示的内容是什么? 应该如何调整内容使之吸引期望的访问者? 需要多少个页面?网站的结构是怎样? 为页面.图像和其他外部文件设计一个简单且一致的命名规则. 2 ...
- AspNetCore3.1_Secutiry源码解析_3_Authentication_Cookies
系列文章目录 AspNetCore3.1_Secutiry源码解析_1_目录 AspNetCore3.1_Secutiry源码解析_2_Authentication_核心流程 AspNetCore3. ...
- 【分布式锁】03-使用Redisson实现RedLock原理
前言 前面已经学习了Redission可重入锁以及公平锁的原理,接着看看Redission是如何来实现RedLock的. RedLock原理 RedLock是基于redis实现的分布式锁,它能够保证以 ...
- VSCode 配置C++开发环境
目录 安装VSCode应用程序 安装相关插件 汉化插件 C++编辑器插件 编写配置文件 tasks.json launch.json c_cpp_properties.json 第一步.安装VSCod ...
- c# winform 访问WebServices （通过Http方式）
第一步.编写WebServices服务方法 [WebMethod] public void PostJson(string str, string bb) { Dictionary<string ...
- Linux下MySQL主主同步
主主复制:主从相互授权连接,读取对方binlog日志并更新到本地数据库的过程:只要对方数据改变,自己就跟着改变. 本节介绍主主复制模式的配置. 前提条件 已安装MySQL两台服务器.服务器规划示例如表 ...
- 理解BERT:一个突破性NLP框架的综合指南
概述 Google的BERT改变了自然语言处理(NLP)的格局 了解BERT是什么,它如何工作以及产生的影响等 我们还将在Python中实现BERT,为你提供动手学习的经验 BERT简介 想象一下-- ...
- 一份精简的Numpy使用指引（附python演练）
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! Numpy 的主要用途是以数组的形式进行数据操作. 机器学习中大多 ...
- 科普 | 生成对抗网络(GAN)的发展史
来源:https://en.wikipedia.org/wiki/Edmond_de_Belamy 五年前,Generative Adversarial Networks(GANs)在深度学习领域掀起 ...