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

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

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

// 禁用手机自带的键盘输入框
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. iOS开发——实用篇&KVO与KVC详解

    KVO与KVC详解 由于ObjC主要基于Smalltalk进行设计,因此它有很多类似于Ruby.Python的动态特性,例如动态类型.动态加载.动态绑定等.今天我们着重介绍ObjC中的键值编码(KVC ...

  2. replace和insert的语句插入(转)

    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句 Insert是T-sql中常用语句,Insert INTO table(field1,field2,...) valu ...

  3. C++之运算符重载(2)

    上一节主要讲解了C++里运算符重载函数,在看了单目运算符(++)重载的示例后,也许有些朋友会问这样的问题.++自增运算符在C或C++中既可以放在操作数之前,也可以放在操作数之后,但是前置和后置的作用又 ...

  4. Hive中数据的加载和导出

    原文:http://blog.javachen.com/2014/06/09/hive-data-manipulation-language.html 关于 Hive DML 语法,你可以参考 apa ...

  5. ASP.NET MVC 4 如何避免数据库被自动创建或自动迁移

    保哥说要想避免数据库被自动创建或自动迁移,可以在Global.asax文件里的Application_Start方法中加入: System.Data.Entity.Database.SetInitia ...

  6. 乐在其中设计模式(C#) - 单例模式(Singleton Pattern)【转】

    介绍 保证一个类仅有一个实例,并提供一个访问它的全局访问点. 示例 保证一个类仅有一个实例. Singleton using System; using System.Collections.Gene ...

  7. JavaScript常用的经典小技巧

    1.屏蔽鼠标右键 <--body 方式--> <body oncontextmenu="window.event.returnValue=false"> & ...

  8. Rust 学习 0

    安装Rust 后,本地有文档: file:///usr/local/share/doc/rust/html/index.html file:///usr/local/share/doc/rust/ht ...

  9. Java Concurrency - ThreadLocal, 本地线程变量

    共享数据是多线程应用最常见的问题之一,但有时我们需要为每个线程保存一份独立的变量.Java API 提供了 ThreadLocal 来解决这个问题. 一个 ThreadLocal 作用的例子: imp ...

  10. Nginx - Configuration File Syntax

    Configuration Directives The Nginx configuration file can be described as a list of directives organ ...