`

强力推荐jQuery插件,预定格式输入

阅读更多

Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。



官方网站: http://digitalbush.com/projects/masked-input-plugin/

1.     介绍
maskedinput是一个对输入框进行格式控制的jq插件。主页为http://digitalbush.com/projects/masked-input-plugin/。
maskedinput有3个通配符:
  a - Represents an alpha character (A-Z,a-z)
  9 - Represents a numeric character (0-9)
  * - Represents an alphanumeric character (A-Z,a-z,0-9) 
2.     使用介绍
1)     引入需要的js
<script type="text/javascript" src="../../Core/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.2.2.js"></script>
2)     假如有文本框<input id="product" tabindex="7" type="text">,则使用如下代码来控制格式
  $("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
其中placeholder和completed为可选项,placehoder是使用指定字符来代替默认的下划线来占位。completed为输入完成后的回调函数。在官方的例子中,completed是不起作用的,检查后发现源码中有如下语句:
  if (settings.completed && next == len)
            settings.completed.call(input);
但 实际上next==len永远都是false,我debug了一下,发现next在输入完成后变成了输入字数+1。比如有4位输入字符,当输入1,2,3 位数字后,nex分别是1,2,3,但输入第四位后,next变为了5,导致了条件永远不成立,回调函数自然无法执行。我将条件改为if (settings.completed && (next-1) == len)后成功。
3)     还可以定制自己的mask,使用方法如下:
  jQuery(function($){
     $.mask.definitions['~']='[+-]';
     $("#eyescript").mask("~9.99 ~9.99 999");
  });
则<input id="eyescript" tabindex="8" type="text">中~位置只能输入+或-。

使用说明
需要使用jQuery库文件Masked Input Plugin库文件

使用实例
一,包含文件部分

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

二,HTML部分

<ul>

主要是表单文本框元素,注意给每个表单指定一个ID

三,javascript部分

<script type="text/javascript">

这部分主要是给每个指定的ID文本框一个格式,可自定义任意格式。实例可知,只需要指定文本框和掩码格式。

输入限制,分别如下
a - 表示只能输入(A-Z,a-z)范围内的值
9 - 表示只能输入(0-9)范围内的值
* - 表示只能输入(A-Z,a-z,0-9)范围内的值

同时还可以指定掩码显示效果,实例可知输入的部分下面有一条下划的虚线,使用如下方法可切换。

$("#product").mask("99/99/9999",{placeholder:" "});

将掩码显示格式_ _换为" "

还可以指定触发事件,如下:

$("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});

支持自定义掩码设置,如下:

$.mask.definitions['~']='[+-]';

使用Masked Input Plugin实现文本框掩码效果可以增强用户体验,按指定的格式进行文本输入,值得推荐。

  • 大小: 44.8 KB
分享到:
评论

相关推荐

    jquery插件库大全(200个).zip

    jquery多值输入插件 jquery多级菜单导航 jquery大转盘game jquery实现网易邮箱首页插件 jquery导航,缓慢弹出下拉效果 jquery左侧导航滑动网页定位效果 jquery左侧弹出二级菜单 jquery弹出层 jquery弹出层 三种弹出...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    input限制输入格式jQuery插件

    jquery.samask-masker是一款input限制输入格式jQuery插件。该jquery插件可以在用户往输入框输入内容时,限制输入内容的格式,例如电话号码格式,日期格式,货币格式和ip地址格式等等。

    JQuery插件 IP地址输入框

    "JQuery插件 IP地址输入框"就是为了解决这个问题而设计的,它允许用户在输入框中便捷地输入IP地址,并能自动进行格式化和有效性检查。 该插件特别指出目前仅支持Firefox浏览器,这可能是因为其CSS样式在其他浏览器...

    JQuery简单插件示意,介绍插件的基本写法格式

    本篇文章将深入探讨如何编写一个简单的jQuery插件,理解其基本的写法格式。这对于任何希望扩展jQuery功能或者创建自定义解决方案的开发者来说,都是至关重要的基础知识。 首先,我们要明确jQuery插件的目的是为了...

    可输入下拉框jquery插件

    本文将详细介绍"可输入下拉框jQuery插件"的相关知识点。 首先,jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在本插件中,jQuery起到了核心作用,通过它的API和方法实现了...

    jQuery的车牌插件

    而“jQuery的车牌插件”是这个库的一个扩展,专门针对车牌号码输入场景进行优化,提供了更加友好和高效的用户体验。 这款基于jQuery的车牌输入插件设计目标是让用户在网页上输入车牌号码时,能够享受到如同原生应用...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    好用清除html的jquery插件

    这种插件对于处理用户输入的数据、显示干净的文本或者优化网页性能等方面非常有用。 描述中提到,“这是一个非常好用且方便的插件”,这暗示了该插件具有良好的用户体验和易用性。你可以通过查看源代码来学习其工作...

    sublime2 jquery插件

    接着,会弹出一个插件列表,此时在搜索框中输入`jQuery`,找到相关的jQuery插件,如`jQuery Syntax Highlighting`,然后点击进行安装。 安装完成后,无需重启Sublime Text 2,你就可以立即体验到jQuery的语法高亮...

    jQuery插件开发学习

    这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    Jquery数字输入插件,淘宝商品数量输入插件、

    本主题涉及的是一个基于jQuery的特定插件,即用于数字输入的插件,通常用于电商网站的商品数量选择,如淘宝上的商品数量加减功能。这个插件可能被称为"key.number",它为用户提供了友好的交互体验,使得用户可以方便...

    50个jquery插件介绍

    1. **表单验证插件**:如jQuery Validation Plugin,它可以轻松地为表单添加验证规则,确保用户输入的数据格式正确。 2. **图片轮播插件**:例如Bootstrap Carousel或Slick Slider,它们提供了美观且响应式的图片...

    jquery插件

    2. **多媒体播放**:jQuery插件如`jQuery.media`和`jPlayer`提供了优雅的方式来处理视频和音频播放,支持多种格式,提供自定义的播放器皮肤和控制选项,使开发者能够创建互动性强的多媒体体验。 3. **DOM操作和事件...

    jQuery插件jQuery插件

    jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件

    jquery格式输入插件Masked Input

    jQuery Masked Input 插件不仅适用于基本的文本输入,还可以与其他jQuery插件如Validator结合使用。此外,该插件具有良好的浏览器兼容性,支持大部分现代浏览器以及较旧的IE版本。 总的来说,jQuery Masked Input ...

    jQuery国际电话输入插件

    **jQuery国际电话输入插件详解** 在Web开发中,尤其是涉及到多国用户交互的网站,一个功能完善的国际电话号码输入组件是必不可少的。"jQuery国际电话输入插件"就是这样一款工具,它为用户提供了一个优雅的方式来...

    jquery插件,是文本框只能输入数字

    这个插件的标题"jquery插件,是文本框只能输入数字"表明我们正在讨论一个特定的jQuery扩展,它的功能是限制用户在文本框中只能输入数字。这种功能在各种场景下都很实用,例如在线表单、财务输入或任何需要精确数字...

Global site tag (gtag.js) - Google Analytics