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

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

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

// 禁用手机自带的键盘输入框
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. c高级编程4 LD_DEBUG

    [root@monitor ~]# LD_DEBUG=help ls Valid options for the LD_DEBUG environment variable are: libs dis ...

  2. HDU--杭电--1195--Open the Lock--深搜

    Open the Lock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  3. Helpers\RainCaptcha

    Helpers\RainCaptcha This class can validate CAPTCHA images with RainCaptcha. It can generate an URL ...

  4. Linux shell 脚本攻略之统计文件的行数、单词数和字符数

    摘自:<Linux shell 脚本攻略>

  5. 小白日记43:kali渗透测试之Web渗透-SqlMap自动注入(一)-sqlmap参数详解TARGET

    SqlMap自动注入(一) sqlmap是一款非常强大的开源sql自动化注入工具,可以用来检测和利用sql注入漏洞[动态页面中get/post参数.cookie.HTTP头].它由Python语言开发 ...

  6. STL之heap

    STL的堆操作 STL里面的堆操作一般用到的只有4个:make_heap();.pop_heap();.push_heap();.sort_heap(); 他们的头文件函数是#include < ...

  7. lk启动流程详细分析

    转载请注明来源:cuixiaolei的技术博客 这篇文章是lk启动流程分析(以高通为例),将会详细介绍下面的内容: 1).正常开机引导流程 2).recovery引导流程 3).fastboot引导流 ...

  8. 【转】android应用程序签名

    概述 Android系统要求,所有的程序经过数字签名后才能安装.Android系统使用这个证书来识别应用程序的作者,并且建立程序间的信任关系.证书不是用于用户控制哪些程序可以安装.证书不需要授权中心来 ...

  9. HTTP - Cookie 机制

    HTTP 是种无状态的协议,即使用 HTTP 协议时,每次发送请求都会产生对应的新响应,协议本身不会保留之前一切的请求或响应报文的信息.这是为了更快地处理大量事务,确保协议的可伸缩性,而特意把 HTT ...

  10. Git CMD - rm: Remove files from the working tree and from the index

    命令格式 git rm [-f | --force] [-n] [-r] [--cached] [--ignore-unmatch] [--quiet] [--] <file>…​ 命令参 ...