今天遇到一个问题, 定义一个样式,且给样式绑定事件,让其只能输入数字. js函数如下:
-
functionNumbersOnlyBind(){
-
$(".NumbersOnly").bind({
-
keypress:function(event){
-
varkey=event.which;
-
if(key<48||key>122||key>57){
-
returnfalse;
-
}
-
}
-
});
-
}
然后添加两个textbox, 第一个用于输入类型, 初始为NUM, 意思为只能输入数字模式, 第二个用于测试这种模式. 当第一个输入框为NUM时,点击按钮Apply, 则第二个输入框就只能输入数字, 第一个输入框为其他字符串时, 第二个则可以输入任何字符.
在实现时,思路是如果第一个输入框为NUM则给第二个输入框添加.NumbersOnly 样式, 否则移除该样式. 本以为移除样式后,第二个输入框中绑定的事件就可以移除, 但是事实证明是不可以移除的. 除非用unbind解除事件,因为虽然事件是通过.NumberOnly样式绑定的, 但是绑定后,这个事件就和这个输入框绑定上了,而和样式没关系了. 所以事件也不会随着样式的移除而移除..
页面源代码:
-
<html>
-
<head>
-
-
<scripttype="text/javascript"src="./jquery/jquery-1.7.2.js"></script>
-
-
<scripttype="text/javascript">
-
$(document).ready(function(){
-
-
functionNumbersOnlyBind(){
-
$(".NumbersOnly").bind({
-
keypress:function(event){
-
varkey=event.which;
-
if(key<48||key>122||key>57){
-
returnfalse;
-
}
-
}
-
});
-
}
-
-
$("#txtType").val("NUM");
-
-
$("#btnApply").click(function(event){
-
-
vartype=$("#txtType").val();
-
-
if(type=="NUM"){
-
$("#txtTest").addClass("NumbersOnly");
-
NumbersOnlyBind();
-
//alert("numberonly");
-
}
-
else{
-
-
//$("#txtTest").removeClass("NumbersOnly");
-
$("#txtTest").unbind();
-
//$(".NumbersOnly").unbind();//移除所有的事件
-
//alert("Removenumberonly");
-
}
-
-
$("#txtTest").val("");
-
$("#txtTest").attr("readonly",false);
-
$("#txtTest").focus();
-
event.preventDefault();
-
});
-
});
-
-
</script>
-
</head>
-
<body>
-
<inputname="txtType"type="text"maxlength="10"id="txtType">
-
<inputname="txtTest"type="text"maxlength="10"id="txtTest">
-
<inputtype="button"name="btnApply"value="Apply"id="btnApply">
-
-
</body>
-
</html>
今天遇到一个问题, 定义一个样式,且给样式绑定事件,让其只能输入数字. js函数如下:
-
functionNumbersOnlyBind(){
-
$(".NumbersOnly").bind({
-
keypress:function(event){
-
varkey=event.which;
-
if(key<48||key>122||key>57){
-
returnfalse;
-
}
-
}
-
});
-
}
然后添加两个textbox, 第一个用于输入类型, 初始为NUM, 意思为只能输入数字模式, 第二个用于测试这种模式. 当第一个输入框为NUM时,点击按钮Apply, 则第二个输入框就只能输入数字, 第一个输入框为其他字符串时, 第二个则可以输入任何字符.
在实现时,思路是如果第一个输入框为NUM则给第二个输入框添加.NumbersOnly 样式, 否则移除该样式. 本以为移除样式后,第二个输入框中绑定的事件就可以移除, 但是事实证明是不可以移除的. 除非用unbind解除事件,因为虽然事件是通过.NumberOnly样式绑定的, 但是绑定后,这个事件就和这个输入框绑定上了,而和样式没关系了. 所以事件也不会随着样式的移除而移除..
页面源代码:
-
<html>
-
<head>
-
-
<scripttype="text/javascript"src="./jquery/jquery-1.7.2.js"></script>
-
-
<scripttype="text/javascript">
-
$(document).ready(function(){
-
-
functionNumbersOnlyBind(){
-
$(".NumbersOnly").bind({
-
keypress:function(event){
-
varkey=event.which;
-
if(key<48||key>122||key>57){
-
returnfalse;
-
}
-
}
-
});
-
}
-
-
$("#txtType").val("NUM");
-
-
$("#btnApply").click(function(event){
-
-
vartype=$("#txtType").val();
-
-
if(type=="NUM"){
-
$("#txtTest").addClass("NumbersOnly");
-
NumbersOnlyBind();
-
//alert("numberonly");
-
}
-
else{
-
-
//$("#txtTest").removeClass("NumbersOnly");
-
$("#txtTest").unbind();
-
//$(".NumbersOnly").unbind();//移除所有的事件
-
//alert("Removenumberonly");
-
}
-
-
$("#txtTest").val("");
-
$("#txtTest").attr("readonly",false);
-
$("#txtTest").focus();
-
event.preventDefault();
-
});
-
});
-
-
</script>
-
</head>
-
<body>
-
<inputname="txtType"type="text"maxlength="10"id="txtType">
-
<inputname="txtTest"type="text"maxlength="10"id="txtTest">
-
<inputtype="button"name="btnApply"value="Apply"id="btnApply">
-
-
</body>
-
</html>
分享到：
相关推荐
如果使用a标签跳转到指定的div区域，则只需要把a标签的href属性设置为“#divId”就好了，比如： 跳转到div 这里是被跳转的区域 ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的
主要介绍了jQuery使用removeClass方法删除元素指定Class的方法,可实现针对指定元素样式的批量删除功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery hover事件简单实现同时绑定2个方法。分享给大家供大家参考，具体如下： 这里将hover事件同时挂2个方法： 1个是悬停的时候执行的，另外一个是离开的时候执行 代码如下： $(document).ready...
主要介绍了JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作,涉及jquery事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下
class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的... 用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), removeClass(), toggleClass()等方法来完成. addClass()
其中一种办法是改变页面元素的CSS类(Class)，这在传统的Javascript里，我们通常是通过处理HTML Dom的classname特性来实现的；而jQuery里提供三种方法来实现这个功能，虽然它们和传统方法... removeClass() – 移除CSS类
4.2 使用removeClass（）函数动态移除样式类 4.3 使用toggleClass（）函数切换页面元素的样式类 4.4 为body增加class类支持 4.5 操作div的显示与隐藏 4.6 如何设定div始终居中显示 4.7 测试浏览器是否支持某些CSS 3...
jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 实例 ...
removeClass([class]) toggleClass(class [, switch]) HTML代码 html( [val] ) 文本 text( [val] ) 值 val( [val] ) CSS CSS css(name) css(properties) css(name, value) 位置 offset() position() ...
本文实例讲述了jQuery动态移除和添加背景图片的方法。分享给大家供大家参考，具体如下： 利用jQuery移除和添加图片 1、样式 <style type=text/css> .changeImage{ background:url(images/right.png) no-...
4.2.3 removeClass([class]) 65 4.2.4 removeClass(function(index, class)) 66 4.2.5 toggleClass(class) 66 4.2.6 toggleClass(class, switch) 67 4.2.7 toggleClass(function(index, class), [switch]) 67 4.3 ...
核心 jQuery 核心函数 jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(html, props) jQuery(elements) jQuery() jQuery(callback) jQuery 对象访问 each(callback) ...removeClass([class |
removeClass([class|fn]) toggleClass(class|fn[,sw]) HTML代码/文本/值 html([val|fn]) text([val|fn]) val([val|fn|arr]) CSS CSS css(name|pro|[,val|fn]) 位置 offset([coordinates]) position() ...
jQuery 删除类 一个插件，用于将 jQuery 的当前 jQuery.fn.removeClass 替换为一个接受多个参数的插件，包括正则... $(element).removeClass(/className(|[0-9]+)/g, 'anotherClass anotherClass', 'yetAnother');
”，言归正传，来看jquery如何添加、移除CSS类： 1. removeClass() – 移除CSS类 $("#target").removeClass("oldClass"); //#target 指的是需要移除CSS类的元素的ID //oldClass 指的是CSS类的名称 2.addClass() – ...
* live() - 与bind()不同的是，live()一次只能绑定一个事件。 * [attribute!=value] jQuery 1.3中意义改变 * load 的data参数在jQuery 1.3中也可以接受String + ajax的error回调的第二个参数可能值"timeout", "error...
$.removeClass( [class] ), .removeClass( fn(index, class) ) $.toggleClass( class [, switch] ), .toggleClass( fn(index, class) [, switch] ) HTML, text str.html( ) $.html( val ), .html( fn(index, html) )...
removeClass()方法和addClass()差别不大。这就来看看： 代码如下:jQuery.fn.extend({ removeClass: function( value ) { var classes, elem, cur, clazz, j, finalValue, i = 0, len = this.length, ...