手机涉及到填写表单时,需要手机弹出自定义的输入框,而非手机自带的输入键盘,如大写数字等。

实现思路(考虑多种文本输入形式):

首先,文本框获取焦点时禁止手机弹出自带的输入键盘。

// 禁用手机自带的键盘输入框
function forbidFocus(i){
$('#txt'+i).focus(function(){
document.activeElement.blur();
});
}

其次,显示与关闭自定义的输入键盘。

// 打开自定义输入键盘
function showDialog(i) {
$('#txt'+i).on('click', function(){
$('#num'+i).animate({bottom: "0"}, 'fast');
// 若多种文本输入框时,需隐藏其他的输入键盘
hideDialog(i);
});
} // 关闭自定义输入键盘
function hideDialog(i) {
$('.popup-list').not('#num'+i).animate({bottom: -h + 'px'}, 'fast');
}

最后,点击自定义的输入键盘,做判断使对应的input获取值。

jq实现手机自定义弹出输入框的更多相关文章

  1. ios输入法弹出输入框定位错乱

    弹出输入框会使视口高度发生变化,弹出输入框后动态匹配这个高度 以下是使用jq的方法 $('input').on('blur', function () { setTimeout(function () ...

  2. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  3. android自定义弹出框样式实现

    前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...

  4. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  5. CSS3/jQuery自定义弹出窗口

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  6. Python实现使用tkinter弹出输入框输入数字, 具有确定输入和清除功能

    Python3.6中用tkinter, 弹出可以输入数字的输入框. # Copyright (c) 2017-7-21 ZhengPeng All rights reserved. def pop_u ...

  7. react native仿微信性别选择-自定义弹出框

    简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...

  8. Android 弹出输入框

    final EditText inputServer = new EditText(SettingActivity.this); AlertDialog.Builder builder = new A ...

  9. .NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

随机推荐

  1. Mac 下配置Tomcat7和eclipse中配置tomcat

    转载自: http://www.cnblogs.com/weilaikeji/archive/2013/05/29/3106473.html 1.下载Tomcat 从Tomcat项目主页下载相关压缩包 ...

  2. B. Fox And Two Dots

    B. Fox And Two Dots time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. Android studio设置参数提示

    在Android studio的使用的过程中,那么就需要对当前的代码显示当前的方式做一个的提示信息,那么可以通过Android studio的的设置的方法,来对Android studio方法的提示显 ...

  4. [Oracle EBS APIs]import Flow routing and DJ routing using BOM_RTG_PUB.PROCESS_RTG APIs

    DJ routing --BOM模块的工艺路线 Flow routing -- Flow Manufacturing 模块使用的工艺路线,导入 Flow routing时先导入Line Operati ...

  5. 关于JDBC和ODBC的区别

    转载..... JDBC与ODBC都可以实现类似的功能,但JDBC与ODBC的区别是他们的开发架构不同,其实现细节上也有所差异. 谈到JDBC与ODBC的区别,JDBC和ODBC其实都是用来连接数据库 ...

  6. button轮番点击,只点击一次,鼠标hover

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  7. css3 transition 实现图片放大缩小

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Jersey(1.19.1) - JSON Support

    Jersey JSON support comes as a set of JAX-RS MessageBodyReader<T> and MessageBodyWriter<T&g ...

  9. 做SqlDependency总结的一些经验

    1.--查询是否具有Broker功能  select is_broker_enabled from sys.databases where [name]='DBName' 2.--打开Broker功能 ...

  10. 初话C++模板【用自己的话,解释清楚这些】

    用自己的话解释清楚C++的模板编程 模板编程是为了解决什么问题而出现的? 提高代码的重用性,提高代码的利用率. 泛型编程的一种实现. 模板的精神是: 类型参数化. 模板的实现 模板分为:函数模板.类模 ...