js实现软键盘
<p><img id="img" onclick="javascript:var s=document.createElement('script');s.src='http://files.cnblogs.com/files/chris2002/keyboard.js';document.body.appendChild(s);(function(){var input1 = document.getElementById('text1');input1.onclick = function(){new KeyBoard(input1);};})();" src="http://images2015.cnblogs.com/blog/1011648/201608/1011648-20160820210401140-2008946463.jpg" alt="开始游戏" width="200" /></p>
<p><input id="text1" type="number" readonly="readonly" /></p>
网页输入框
(function(exports){
var KeyBoard = function(input, options){
var body = document.getElementsByTagName('body')[0];
var DIV_ID = options && options.divId || '__w_l_h_v_c_z_e_r_o_divid'; if(document.getElementById(DIV_ID)){
body.removeChild(document.getElementById(DIV_ID));
} this.input = input;
this.el = document.createElement('div'); var self = this;
var zIndex = options && options.zIndex || 1000;
var width = options && options.width || '100%';
var height = options && options.height || '193px';
var fontSize = options && options.fontSize || '15px';
var backgroundColor = options && options.backgroundColor || '#fff';
var TABLE_ID = options && options.table_id || 'table_0909099';
var mobile = typeof orientation !== 'undefined'; this.el.id = DIV_ID;
this.el.style.position = 'absolute';
this.el.style.left = 0;
this.el.style.right = 0;
this.el.style.bottom = 0;
this.el.style.zIndex = zIndex;
this.el.style.width = width;
this.el.style.height = height;
this.el.style.backgroundColor = backgroundColor; //样式
var cssStr = '<style type="text/css">';
cssStr += '#' + TABLE_ID + '{text-align:center;width:100%;height:160px;border-top:1px solid #CECDCE;background-color:#FFF;}';
cssStr += '#' + TABLE_ID + ' td{width:33%;border:1px solid #ddd;border-right:0;border-top:0;}';
if(!mobile){
cssStr += '#' + TABLE_ID + ' td:hover{background-color:#1FB9FF;color:#FFF;}';
}
cssStr += '</style>'; //Button
var btnStr = '<div style="width:60px;height:28px;background-color:#1FB9FF;';
btnStr += 'float:right;margin-right:5px;text-align:center;color:#fff;';
btnStr += 'line-height:28px;border-radius:3px;margin-bottom:5px;cursor:pointer;">submit</div>'; //table
var tableStr = '<table id="' + TABLE_ID + '" border="0" cellspacing="0" cellpadding="0">';
tableStr += '<tr><td>1</td><td>2</td><td>3</td></tr>';
tableStr += '<tr><td>4</td><td>5</td><td>6</td></tr>';
tableStr += '<tr><td>7</td><td>8</td><td>9</td></tr>';
tableStr += '<tr><td style="background-color:#D3D9DF;">.</td><td>0</td>';
tableStr += '<td style="background-color:#D3D9DF;">del</td></tr>';
tableStr += '</table>';
this.el.innerHTML = cssStr + btnStr + tableStr; function addEvent(e){
var ev = e || window.event;
var clickEl = ev.element || ev.target;
var value = clickEl.textContent || clickEl.innerText;
if(clickEl.tagName.toLocaleLowerCase() === 'td' && value !== "del"){
if(self.input){
self.input.value += value;
}
}else if(clickEl.tagName.toLocaleLowerCase() === 'div' && value === "submit"){
body.removeChild(self.el);
}else if(clickEl.tagName.toLocaleLowerCase() === 'td' && value === "del"){
var num = self.input.value;
if(num){
var newNum = num.substr(0, num.length - 1);
self.input.value = newNum;
}
}
} if(mobile){
this.el.ontouchstart = addEvent;
}else{
this.el.onclick = addEvent;
}
body.appendChild(this.el);
} exports.KeyBoard = KeyBoard; })(window);
数字键盘
js实现软键盘的更多相关文章
- js判断软键盘是否开启弹出
移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. va ...
- JS软键盘代码
页面代码如下: <HTML> <HEAD> <TITLE>一个不错的js软键盘代码</TITLE> <meta http-equiv=" ...
- js对手机软键盘的监听
js还没有办法对手机软键盘直接进行监听的,但是可以有其他角度来判断软键盘是否弹起.比如输入框是否获取焦点等.focusin和focusout支持冒泡,对应focus和blur, 使用focusin和f ...
- js防止安卓手机软键盘弹出挤压页面导致变形的方法
5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...
- js-移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
- js 移动端之监听软键盘弹出收起
js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...
- JS移动端如何监听软键盘回车事件
移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签 注意点:form ...
- JS自动让手机调出软键盘,进行输入
$('.search').click(function(){ $('input[type=text]').focus(); //让input框自动聚焦就可以让手机自动调出软键盘 });
- js软键盘
<<!DOCTYPE html><html><head> <title></title></head><body& ...
随机推荐
- 在Linux服务器非root权限下搭建TensorFlow框架(Anaconda)
今天终于动手折腾实验室的服务器啦!由于权限原因,只能在自己的路径下安装TensorFlow. 1. 下载安装Anaconda 官网下载地址:https://www.anaconda.com/downl ...
- 读《Tooth-Marked Tongue Recgnition Using Multiple Instance Learning and CNN Features》
本人 组会汇报的一篇关于齿痕舌判定的文章,贴上PPT 涉及多示例学习和神经网络方面知识. 准确率有待提高哈哈.
- EF Core 生成数据库
1.运行cmd,切换到打开项目所在文件夹,输入下面的命令 dotnet ef migrations add Initial 建立并初始化数据库 dotnet ef database update ...
- jieba库与词云的使用——以孙子兵法为例
1.打开cmd安装jieba库和 matplotlib. 2.打开python,输入代码.代码如下: from wordcloud import WordCloud import matplotlib ...
- 跟随我在oracle学习php(17)
通用设定形式 定义一个字段的时候的类型的写法. 比如: create table tab1 (f1 数据类型 ); 数据类型: 类型名[(长度n)] [unsigned] [zerofil ...
- Python列表操作集合
对于python列表里元素的操作主要分为以下几个方面: 1.向列表里面加元素: 向python列表里面添加元素主要有三种方法: (1)append() append()对于列表的操作主要实现的是在特定 ...
- 软件151 王楚博 JavaEE的配置
一.准备以下压缩包 1.JDK1.7 文件:jdk1.7.rar 2. eclipse-jee-mars-2 文件:32位系统准备eclipse-jee-mars-2-win32.zip,64位系统准 ...
- maven安装与基本配置
maven安装与基本配置 依赖:java环境,JDK安装 一. maven安装 (一)下载maven (二)安装与环境变量设置 (三)maven setting.xml配置 二. 创建maven项目 ...
- firefox 开启安全禁用端口
firefox 开启安全禁用端口 step1: 在firefox地址栏键入 about:config step2: 新建字符串 network.security.ports.banned.overri ...
- Go 基础 坑
1.字符串空为"" 2. 传递的数组是原数组的拷贝,所以是无法通过传递数组的方法去修改原地址的数据的.在GO语言中除了切片(slice).集合(map).通道(channel)和接 ...