要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等。 只要我们能捕获即时事件就能做到很多事情。 需要了解的知识 首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。 oncha...
【解决方案】 1. 准备工作 (1)输入框 代码如下:<input type="text" name="searchText" title="请输入搜索关键字" /> (2)CSS代码 代码如下:input.helpText { color: #aaa;} (3)转换方法 代码如下:function switchText() { if ($(this).val() == $(this).attr(title)) $(this).val().removeClass(helpText); else if ($.trim($(this).val()) == ) $(this).addClass(helpText).val($(this).attr(title)); } (...
为了提高用户体验,我在午休时候想起了是不是可以用jQuery写个插件。想到不如做到,果然,我实现了这个功能。在写这个插件时我潜意识里想到这样的插件网上应该有人写过,不过我并没有去搜索,你有兴趣可以找一找。下面是插件的源代码。 源代码 代码如下:;(function($) { $.fn.autoSizeText = function(settings) { var _defaultSettings = {min:20,max:40}; var _settings = $.extend(_defaultSettings, settings); var _handler ...
一直很想做这个效果,原理是监听鼠标滚轮事件;可将此效果继续发散到其他应用上,如图片缩放,页面缩放等。滚轮效果 -http://www.51obj.cn/ var oTxt=document.getElementById("txt"); /*********************** * 函数:判断滚轮滚动方向 * 参数:event * 返回:滚轮方向 1:向上 -1:向下 *************************/ var scrollFunc=function(e){ var direct=0; e=e || window.event; if(e.wheelDelta){ direct=e.whe...
代码如下:(本来基于原型封装了一下,发现完全在增加代码量,又改回来了) 感谢sparks345提出粘贴时的问题 这样的话,只能多加几个事件onpropertychange,oninput, obj.watch("value",function(id,oval,nval){}) 具体可以看这里,跟踪input值改变兼容处理 限制输入字节数 #div1 {width:500px;margin:20px auto;} #div1 ul {list-style-type:decimal;line-height:25px;} 可输入5个字节: 可输入6个字节: 可输入7个字节: 可输...
var input_arr = document.getElementsByName('word'); var len = input_arr.length; for(var i=0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]定义和用法 onkeyup 事件会在键盘按键被松开时发生。 语法 onkeyup="SomeJavaScriptCode"参数 描述 SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。 支持该事件的 HTML 标签: <a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <bu...
最近在做一个项目,涉及到了移动层的应用,结果使用了移动层,可里面的输入框却不能使用了,这是因为层的覆盖,把输入框给挡住了,但由于我是设了层为透明的,所以仍然可以看得到输入框,可就是输不进去东西,后来终于找到了解决的方法了,就是在层移动的时候,添加上 代码如下:document.getElementById("Mcount").focus() 这句话就是让我们的输入框获得焦点,这样子就可以输入了 呵呵
由于原文已经介绍的很好了,现在只是一些翻译和小小的补充。 例子 代码如下:<!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> <title>Demo</title> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="autoNumeric.js"></script> <scri...
直接看代码: 代码如下:(function($){ var keyCode={ BACKSPACE: 8, CAPS_LOCK: 20, COMMA: 188, CONTROL: 17, DELETE: 46, DOWN: 40, END: 35, ENTER: 13, ESCAPE: 27, HOME: 36, INSERT: 45, LEFT: 37, // NUMPAD_ADD: 107, // NUMPAD_DECIMAL: 110, // NUMPAD_DIVIDE: 111, // NUMPAD_ENTER: 108, // NUMPAD_MULTIPLY: 106, // NUMPAD_SUBTRACT: 109, PAGE_DOWN: 34, PAGE_UP: 33, PERIOD: 190, RIGHT: 39, SHIFT: 16, SPACE: 3...
代码如下:/** * power by wooshoo copyright 2008-2009 * 程序名:JQuery 专用输入检查器 * 内容:专门针对input[text password hidden]以及textarea的用户输入进行检查 * 检查的范围包括:字符数、是否包含特殊字符、是否为整数、是否符合email格式、是否为电话号码、 * 是否为网站地址、是否为图片地址、是否为浮点小数、是否为人民币货币、是否为日期格式 * 是否为时间格式、是否为日期时间格式、是否为密码格式(仅包含大小写字...
<li id=""><span>***</span>评论<span>鲜果</span><a href="#message_area" onclick=" fillInMessageArea(this);">回复</a></li> <li id=""><span>pizicai</span>评论<span>you</span><a href="#message_area" onclick=" fillInMessageArea(this);">回复</a></li> <form action=""> <textarea onkeyup="rewrite();" rows="4" cols="30" id="message_area" name="message_area"></textarea> <p></p> <input type="submit"/> <input ...
当一个HTML元素的属性改变的时候,都能通过onpropertychange来捕获。例如< input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。 具体理解为:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时只有通过鼠标执行某些操作才能激活该事件! 但onpropertychange只有IE支持,FireFox下的怎么解决呢?firefox的事件oninput,效果和IE的onprop...
<!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/html; charset=gb2312" /> <title>很可爱的输入框_脚本之家_www.gxlcms.com</title> <style> .username_bg { background:url(http://img.jb51.net/images/login_bg.gif) no-repeat 50%;} .inputb...
代码可以更简洁些,有更简便的方法欢迎贡献出来啊。 输入框提示列表效果_脚本之家 function showAndHide(obj,types){ var Layer=window.document.getElementById(obj); switch(types){ case "show": Layer.style.display="block"; break; case "hide": Layer.style.display="none"; } } function getValue(obj,str){ var input=window.document.getElementById(obj); input.value=str; } Location: 中国CHINA 美国USA Sex: ...
单击单元格,将其变为文本框 // 将单元格转化成文本框 function changeTotext(obj) { var tdValue = obj.innerText; obj.innerText = ""; var txt = document.createElement("input"); txt.type = "text"; txt.value = tdValue; txt.id = "_text_000000000_"; txt.setAttribute("className","text"); obj.appendChild(txt); txt.select(); //obj.style.border = "1px dashed #ff9900"; } // 取消单元格中的文本框,并将文本框中...