jquery实时监听某输入框值的变化
$('#password').bind('input propertychange', function() {
&// 密码检验
&&&&&&&&var password = $("#password").val();
&&&&&&&&&if(!passwordFilter(password)){
是jq的一个监听方法名，直接用即可。
& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区需要实现的效果：一个输入框，当输入框未获得焦点的时候，value 值为 “密码”；当输入框失去焦点的时候，输入内容显示为”*****”
&input name=”password” type=”text” id=”showPwd” tabindex=”2″ class=”input” value=”密码” /&
我们很直接会想到下面的js
$(“#showPwd”).focus(function(){$(this).attr(‘type','password');});
发现并没有实现预期效果，出现 uncaught exception type property can't be changed 错误，查看jQuery 1.42源码 1488 行
// We can't allow the type property to be changed (since it causes problems in IE)if ( name === “type” && rtype.test( elem.nodeName ) && elem.parentNode ) {jQuery.error( “type property can't be changed” );}
jQuery 修改不了用源生的JS呢？
$(“#pwd”).focus(function(){$(“#pwd”)[0].type = ‘password';$(“#pwd”).val(“”);});
发现在FF下可以修改并将密码输入框type 修改为 “password” 并将 value设置为空，而IE下却提示无法得到type属性，不支持该命令。 弹出 type 看看真的无法得到吗？
$(“#showPwd”).focus(function(){alert($(“#showPwd”)[0].type);$(“#showPwd”)[0].type = ‘password';$(“#showPwd”).val(“”);});
发现弹出text ，原来不是无法得到，只是IE下不能修改。 因此，我们想到可以先remove然后再生成一个type是password的密码输入框。
下面type为password的输入框
&input name=”password” type=”password” id=”password” class=”input” style=”display:” /&
$(“#showPwd”).focus(function() {var text_value = $(this).val();if (text_value == this.defaultValue) {$(“#showPwd”).hide();$(“#password”).show().focus();}});$(“#password”).blur(function() {var text_value = $(this).val();if (text_value == “”) {$(“#showPwd”).show();$(“#password”).hide();}});
最终效果： 当输入框获得焦点的时，输入的内容显示为“****”；当失去焦点的时，内容为空时显示“密码”。
js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。在ff下仍是可读写属性。
今天遇到个问题，输入框有默认值“密码”，但获得焦点时，“密码”两字会去掉，输入时直接变成”****“的password类型。很明显，一开始的时候，input的类型是t
js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。在ff下仍是可读写属性。
今天遇到个问题，输入框有默认值“密码”，但获得焦点时，“密码”两字会去掉，输入时直接变成”****“的password类型。很明显，一开始的时候，input的类型是t
摘要： 现在有一个需求如图所示，当用户勾选显示明文复选框时，要以明文显示用户输入的密码，去掉勾选时要变回密文，刚开始想到的就是修改输入框的type来决定显示明文还是密文，使用jQuery的attr来做试验，测试结果是chrome，Firefox，ie9+都是好的，在ie8以下就会报错，查找了下原因，ie8中是不允许修改input的type属性，最终换了种思路实现。
当勾选显示明文时替换输入框为t
在运用html+css+javascrpt进行页面制作时，我们往往会遇到一些影响用户体验，而又容易被我们忽视的小细节。比如，input输入框中的提示信息，怎样才能根据对象获得和失去焦点而实现其显示和隐藏。今天在这里，想跟大家分享一下这个小技巧，希望各位大神不要拍砖哦~~~
input输入框，在光标显示时，隐藏提示信息；光标离开输入框时，显示提示信息。
1、给该input
【Android】实现动态显示隐藏密码输入框的内容
在设置输入密码框时，有些时候需要按钮控制输入的是“明文”或者“暗文”。 这里提供一种Android实现动态显示隐藏密码输入框的内容的方法： 主要是通过设置EditText的setTransformationMethod()方法来实现隐藏密码或者显示密码。
package com. import android.o
问题如标题： 鼠标点击到输入框（input）里的时候，输入框的提示消失，鼠标再移开，输入框提示出现。如图所示：
做法如下：
&input type=&text& name=&name& id=&name& class=&ind_cont_input ind_cont_inputioce1&quot
　　CSS3 提高了很多新的样式选项，让我们能够制作出漂亮的表单元素。Fancy Input这款 jQuery 插件不只是关注外观，同时在交互方面通过 CSS3 特性让文本输入域变得更有趣，更有吸引力。
效果演示　　源码下载
本文链接：使用 CSS3 实现动感迷人的输入框 – Fancy Input 编译
1、只允许输入数字
&input name=&username& type=&text& onkeyup=&value=this.value.replace(/\D+/g,'')&&
2、只允许输入英文字母、数字和下划线(以下二种方法实现)
&input name=&username& ty
通过字符串拼接，将所有的输入框中的内容，用“”这样的格式拼接。 网页端代码：
&form& &table& &tr&&th&手机：&/th&
&td style=&padding:10px 0;&& &
同理 此插件不需要任何html标签，只需要一个输入框 有相对应的class类名就ok 且父级有个class类名，其他的都不需要。内部的HTML代码都是自动生成的。 HTML代码如下：
&div class=&parentCls&&
&input type=&text& class=
今天看群里有人发起了人人网以前一些面试题，我以前也转载过一些，恰好闲着，挑选一题来做做，练个手。
本题有以下要求： 1. 使用原生代码实现，不可使用任何框架； 2. 对 input框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input框的下方； 3. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗； 4. 通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到
1.取消按钮按下时的虚线框 　　在input里添加属性值hideFocus或者HideFocus=true
2.只读文本框内容 在input里添加属性值readonly
3.防止退后清空的TEXT文档(可把style内容做做为类引用) 　　&INPUTstyle=beh
input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:
输入框获取焦点状态:
大家可以看效果图的搜索输入框，默认显示着“用户名/Email”的提示，当这个 input 输入框获得焦点时，就自动清空等待用户输入，当用户啥也没输入就离开这个 input 输入框时，输入框内又再次显示“用户名/Email”的提示。是不是很常见？很多搜索、登录、
【解决方案】
　　1. 准备工作
　　（1）输入框
&input type=&text& name=&searchText& title=&请输入搜索关键字& /&
　　（2）CSS代码
input.helpText { color: #}
（3）转换方法
今天来说说鄙人对input输入框在处理上的细节处理和心得，其实制作一个符合CSS标准、FF/IE7/IE6等主流浏览器全兼容、符合用户体验的input其实并不难。先点击看看下面的效果先！
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/
&input type=&text& value=&fisker& onclick=&alert(this.value);& onfocus=&this.blur()& /&
输入框无法获得焦点，不能编辑 表单可以获得值。 可以复制。 蛮奇怪的，都选住了，还没有获得焦点？
&input id=&productName& name=&productName& class=&wid10& type=&text& value=&& /&
//绑定商品名称联想 $('#productName').bind('input p
前端开发过程中，经常需要这样的场景。用JS实现将光标定位于输入框最右侧。 场景一：编辑图片的描述文字 场景二：Script.aculo.us的Ajax.InPlaceEditor类。双击可编辑，编辑后离开可自动更新该区域。 以上场景都需要JS实现将光标定位于输入框最右侧，却不是通过鼠标点入输入框内。 我们知道实现最基本的方法是HTMLElement的focus方法。如下
用JavaScript实现的一个IP地址输入框，感觉不是太好，如果是192.168.1.1就必须输入192.168.001.001了别扭啊
&html& &head& &meta http-equiv=&Content-Type& content=&text/ charset=gb2312&& &met
ENTER键可以让光标移到下一个输入框 &input onkeydown=&if(event.keyCode==13)event.keyCode=9& &
只能是中文&input onkeyup=&value=value.replace(/[ -~]/g,'')& onkeydown=&if(event.keyCode==13)
&input type=&text& id=&only&/&
window.onload=function(e){ var text=document.getElementById(&only&),pattern=/\d/,//pattern匹配字母上的数字键 patte
网上看到很方便实现这个功能的事件： IE 中的 onpropertychange 非IE中的 oninput 用这两事件的好处是，当在输入框的内容发生变化调用事件，使用key 和 mouse的相关事件会比较复杂，而且这个方法用粘贴方法一样有效。 不过用js改变input的value值不会发生这两个事件。 在中文本框中添加两个事件的方法就可以了。（看到网上说非ie中的oninput方法要用addEv
&form id=&fileForm& action=&& method=&post& enctype=&multipart/form-data&& &tr& &td& &input type=&file& name=&file&q
最近在做一个项目，涉及到了移动层的应用，结果使用了移动层，可里面的输入框却不能使用了，这是因为层的覆盖，把输入框给挡住了，但由于我是设了层为透明的，所以仍然可以看得到输入框，可就是输不进去东西，后来终于找到了解决的方法了，就是在层移动的时候，添加上
document.getElementById(&Mcount&).focus()
这句话就是让我们的输
要达到的效果 很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数，或者即时读取输入的值来进行搜索引导，也就是google的关联搜索效果等。 只要我们能捕获即时事件就能做到很多事情。
需要了解的知识 首先，我们需要了解onchange和onpropertychange的不同： IE下，当一个HTML元素的属性改变的时候，
现在很多网站都有这种效果，在文本框输入一个字符，下边会出来相匹配的内容，这个代码就演示了这个功能是如何完成的，当然，这是个静态的，你可以将提示的内容从数据库读取出来，要用到AJAX那东东。
&HTML& &HEAD& &title&带输入匹配的文本框&/title& &style& body,div { font-fa
　　对于一个给定的输入框，如果在文本超过输入框的时候能显示当前光标在整个输入的字符串中所在的位置和剩余多少文本，那将会非常棒！如果可以在任何网站不修改 DOM 就可以实现这个功能，那该多好。
　　在这篇文章中，我们使用 jQuery 实现智能输入框光标的位置。它不需要图像，是使用纯粹的 CSS3 实现的，而且实时、准确，这意味着你在添加或删除文本的时候它会自动适应。使用事
输入表单种输入框焦点的问题 我有个注册表单，有三个输入框，分别是， name,email,password。
当在name和email上输入时，小键盘的返回键是 NEXT 键。我期望的效果是，用户选择NEXT时，
焦点可以自动移到下一个输入框种。比如，从name移动到email，再移动到password输入框。
password，请问这个该怎么实现？
当在password输入框输入时，小键
/** * power by wooshoo copyright
* 程序名：JQuery 专用输入检查器 * 内容：专门针对input[text password hidden]以及textarea的用户输入进行检查 * 检查的范围包括：字符数、是否包含特殊字符、是否为整数、是否符合email格式、是否为电话号码、 * 是否为网站地址、是否为图片地址、是否为浮
关于输入框的问题，请大神帮忙看下 我现在想要实现的效果是，点击输入框后，在输入框下面弹出一个popwindow，选择popwindow里面的某一项，就把值附给输入框，在输入框里面输入比如a，就要把以a开头的项筛选出来，显示在popwindow里面，现在遇到的问题就是弹出popwind以后，输入框里面就没有办法录入内容了，我把焦点强制设置在输入框里面
------解决思路-------------
/* input 和 textarea 最大文字限定插件 * 修改版, 一个中文表示1一个字, 一个英文半个字; * TextLimit - jQuery plugin for counting and limiting characters for input and textarea fields * * pass '-1' as speed if you don't want
&html& &head& &title&很漂亮、兼容火狐的Js日期选择，自动填充到输入框&/title& &meta http-equiv=&content-Type& content=&text/charset=gb2312&& &style type=&quot
&span style=&font-family: Arial, Helvetica, sans-&&&input type=&password& name=&password& id=&password& onkeydown=&return banInputSa
在线求，当点击了某个按钮时，旁边的文本输入框才允许输入文字 用什么方法实现，在线等
------解决方案-------------------- finalEditTexteditText=(EditText)findViewById(id);
editText.setEna
iPhone 对话框与输入框的响应简单界面教程
今天介绍一下iphone中UIButton 与UITextField简单的界面弹出对话框以及按钮的响应 。项目需求：实现两个按钮 ，两个文本框 点击按钮在文本输入框中显示从那个按钮中点进去的信息。
声明类 // // testViewController.h // test // // Created by 宣雨松
iPhone 对话框与输入框简的响应简单界面教程
今天介绍一下iphone中UIButton 与UITextField简单的界面弹出对话框以及按钮的响应 。
项目需求：实现两个按钮 ，两个文本框 点击按钮在文本输入框中显示从那个按钮中点进去的信息。
Android 软键盘盖住输入框的问题
当在Android的layout设计里面如果输入框过多，则在输入弹出软键盘的时候，下面的输入框会有一部分被软件盘挡住，从而不能获取焦点输入。 解决办法： 方法一：在你的activity中的oncreate中setContentView之前写上这个代码getWindow().setSoftInputMode(WindowManager.LayoutPara
&html& &head& &title&Js日期选择器并自动加入到输入框中&/title& &meta http-equiv=&content-Type& content=&text/charset=gb2312&& &script type=&text/
　　文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作，是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件，帮助你在网站中轻松添加输入框的自动完成和自动提示功能。
　　在这篇文章中，我们使用jQuery实现智能输入框光标的位置。它不需要图像，是使用纯粹的CSS3实现的，
所谓的文本框倒叙输入是指输入框的焦点始终在最开始的位置，如图所示，当我输入时，在输入框上显示的是。
为什么要做这个Demo？是因为在项目中遇到了，项目需求是两个输入框，一个正序输入，另一个倒叙输入。 下面我把实现的思路和代码写出来。 文本倒叙输入： 只要我们保证输入框的焦点始终在第一位，这样的话就可以实现每次我们输入的都在最前面，即倒叙 代码：到底有没有能实时检测input输入框的value值改变的事件_百度知道JS判断文本框内容改变事件的简单实例
字体：[ ] 类型：转载 时间：
本篇文章主要是对JS判断文本框内容改变事件的简单实例进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
oninput,onpropertychange,onchange的用法
onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；&&&&&&
oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。
停止冒泡事件
if (e) //停止事件冒泡 e.stopPropagation(); else& window.event.cancelBubble =
执行上面的代码，单击输入框发现也会触发onpropertychange，输入一个值同样也会触发这个事件，这就证明了，只要有属性的值被修改就会触发该事件。
第二、既然我们发现了这个特点，那就会有一个问题了：当我们有时在输入框值发生改变时希望执行一个函数操作，但同时也要修改一个自定义的属性，这样onpropertychange就会被触发两次，这个可能并不是我们所希望的。猜想一下，既然提供了这么一个属性，那一定应该能获取到是哪个属性被改变了。试着获取参数个数及参数内容。
XML/HTML代码 代码如下:&input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"&& &script type="text/javascript"&& &!--&& document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){&& alert(arguments.length);&& for(var i=0;i&arguments.i++){&& alert(arguments[i]);&& }&& });&& --&& &/script&& 执行上面一段代码，会发现弹出了1和[object]，这说明该事件只给回调函数传入一个参数而且是object类型。那我们就试试遍历一下这个object。
XML/HTML代码 代码如下:&input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"&& &script type="text/javascript"&& &!--&& document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){&& for(var item in o){&& alert(item+":"+o[item]);&& }&& });&& //--&& &/script&& 执行一下，发现有很多个属性，但仔细看我们可能会发现这么一个属性：propertyname，相信每个人都能猜到这个属性的意思了。对，这个就是用来获取哪个属性被修改的。
XML/HTML代码 代码如下:&input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"&& &script type="text/javascript"&& &!--&& document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){&& alert(o.propertyName);&& });&& //--&& &/script&& 分别单击文本框和输入一个值，会发现分别弹出了myprop和value。
再回到我们开始的问题，我们只需要判断是否是value被改变就ok了。直接看代码吧：
XML/HTML代码 代码如下:&input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"&& &script type="text/javascript"&& &!--&& document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){&& if(o.propertyName!='value')& //不是value改变不执行下面的操作&& //.......函数处理&& });&& //--&& &/script&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js监听输入框值的即时变化onpropertychange、oninput
字体：[ ] 类型：转载 时间：
很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。
要达到的效果 很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数，或者即时读取输入的值来进行搜索引导，也就是google的关联搜索效果等。 只要我们能捕获即时事件就能做到很多事情。 需要了解的知识 首先，我们需要了解onchange和onpropertychange的不同： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 了解这一点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。我们能不能找到另外一个时间来代替onpropertychange呢？ 经过翻阅资料得知，在其他浏览器下可以使用oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。 oninput的使用 下面我们先了解一下oninput如何使用。 如果您是将注册时间直接写在页面里面，那么如下写法就可以实现： &input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" /& 但是，将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同，必须使用addEventListener来注册。 attachEvent和addEventListener 的不同 说到这里我们再来了解一下 attachEvent和addEventListener 的使用方法： attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列） addEventListener方法 用于 Mozilla系列 举例: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3; 如果这样写,那么将会只有medhot3被执行 写成这样： var btn1Obj = document.getElementById("btn1"); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 执行顺序为method3-&method2-&method1 如果是Mozilla系列，并不支持该方法，需要用到addEventListener var btn1Obj = document.getElementById("btn1"); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false); 执行顺序为method1-&method2-&method3 了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。 判断IE浏览器 如何将IE区分出来呢？ 这似乎是一个老生常谈的问题，网络中有很多找那个方法，归类为两类： 其一，是判断浏览器的功能属性。 其二，就是判断传统的 user-agent 字符串，这可能是最古老也是最流行的检测方式。 在这里就不做深入了解了，我们这里用一种比较简单的方法来判断
代码如下: if("\v"=="v") { alert("IE"); }else{ alert("NO"); }
到目前为止我们遇到的问题就已经解决了，开始写代码来测试我们的思路是否能够实现。 完成代码：
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/ charset=gb2312" /& &meta name="auther" content="fq" /& &title&监听输入框值的即时变化 onpropertychange oninput&/title& &script type="text/javascript"& function immediately(){ var element = document.getElementById("mytext"); if("\v"=="v") { element.onpropertychange = webC }else{ element.addEventListener("input",webChange,false); } function webChange(){ if(element.value){document.getElementById("test").innerHTML = element.value}; } } &/script& &/head& &body&
直接写在页面中的示例：
代码如下: &input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this." onpropertychange="document.getElementById('webtest').innerHTML=this." /& &div&您输入的值为：&span id="webtest"&还未输入&/span&&/div& &br /&&br /&&br /&&br /&&br /& 写在JS中的示例： &input type="text" name="textfield" id="mytext" /& &div&您输入的值为：&span id="test"&还未输入&/span&&/div& &script type="text/javascript"& immediately(); &/script& &/body& &/html&
太漂亮了，一次完成，预览以上代码，页面中共实现两两种方式：第一、页面中直接引用；第二、JS中引用。 经过测试，兼容：IE6、IE7、IE8、Firefox、Opera、Chrome、Safari
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具}