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

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

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

// 禁用手机自带的键盘输入框
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. Linux守护进程(init.d和xinetd)

    http://www.cnblogs.com/itech/archive/2010/12/27/1914846.html

  2. 关于NuDaqPci 数据采集

    最近在做公司一个fct的测试及调试软件 设计到的比较多的通信问题 1,Gpib通信(调用ADL-GPIB) 2,串口通信 3,Usb通信(调用USBXpress) 4,Pci通信(调用PCIS-DAS ...

  3. 1050. String Subtraction (20)

    this problem  is from PAT, which website is http://pat.zju.edu.cn/contests/pat-a-practise/1050. firs ...

  4. svm、经验风险最小化、vc维

    原文:http://blog.csdn.net/keith0812/article/details/8901113 “支持向量机方法是建立在统计学习理论的VC 维理论和结构风险最小原理基础上” 结构化 ...

  5. java_DAO类基本设计

    package cn.itcast.oa.base; import java.util.List; public interface BaseDao<T> { void save(T en ...

  6. super 和this的用法

    class Person { public static void prt(String s) { System.out.println(s); // 打印出来结果 } Person() { prt( ...

  7. html/css 两个div在同一行

    在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将“第一个div”和“第二个div”显示在同一行: <div id="id1&q ...

  8. UVA 539 The Settlers of Catan dfs找最长链

    题意:画边求最长链,边不能重复数点可以. 很水,用暴力的dfs即可,因为数据不大. 本来以为可以用floyd进行dp的,后来想想好像不能在有回路上的图跑...于是没去做. #include <c ...

  9. u-boot移植为tiny6410步骤

    1. 修改顶层Makefile文件 2. 修改arch/arm/cpu/arm1176/s3c64xx/cpu_init.S 3. 修改arch/arm/cpu/arm1176/s3c64xx/Mak ...

  10. javaweb学习总结十六(tomcat服务器的使用、虚拟目录的映射)

    一:tomcat服务器的目录 1:目录结构 2:web应用程序介绍 二:虚拟目录的映射 假如我在E盘建立一个目录web,里面存放1.html文件,我想让外界访问 1:直接在conf目录下的server ...