<title>JavaScript为input/textarea自定义hover,focus效果</title>
<script type="text/javascript">
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfHover = function(sfEls) {
for (var i=; i < sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" iptHover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iptHover\\b"), "");
}
}
}
sfFocus = function(sfEls) {
for (var i=; i < sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" iptFocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" iptFocus\\b"), "");
}
}
}
</script>
<style type="text/css">
textarea{
border:1px solid #BBE1F1;
width:250px;
height:80px;
}
.iptHover,input:hover,textarea:hover{
border:1px solid #77C2E3;
}
.iptFocus,input:focus,textarea:focus{
border:1px solid #77C2E3;
background-color:#EFF7FF;
}
</style>
<input type="text" name="textfield" /><br />
<textarea name="textarea"></textarea>
<script type="text/javascript">
suckerfish(sfHover, "input");
suckerfish(sfFocus, "input");
suckerfish(sfHover, "textarea");
suckerfish(sfFocus, "textarea");
</script>

JavaScript为input/textarea自定义hover,focus效果的更多相关文章

  1. input/select/textarea标签的readonly效果实现

    首先说一下readonly属性的应用场景 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点 在提交表单的时候,该输入项会作为form的一项提交(目的) 这里要说一下disabled和readonly的 ...

  2. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  3. 【前端JS】input textarea 默认文字,点击消失

    如题.前端页面的 input textarea 有时候须要显示默认文字以提示用户,下面为实现代码,以 input 为例.textarea 能够直接搬用 HTML <input type=&quo ...

  4. javascript实现在textarea光标位置插入文字并移动光标到文字末尾

    1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...

  5. Salesforce 开发整理(十一) 自定义放大镜查找效果

    有时候在自定义的visualforce页面上,需要实现系统标准的查找样式,当不能使用标准的style的时候,我们只能选择自定义实现,下面分享一个demo,预览效果如下: 实现代码,Visualforc ...

  6. 设置输入域(input/textarea)中文本光标的位置

    以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...

  7. 修改 input / textarea placeholder 属性的颜色和字体大小

    话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; fon ...

  8. 移动端-webkit-user-select:none导致input/textarea输入框无法输入

    这个问题,也算是个大坑了. 最开始的开始,是因为我们在做大装盘活动的时候,发现在ios上面出现了这样的问题:点击“转”按钮,ios上面会有延迟并且会出现图片的阴影,这个肯定就不好看了撒,然后,找吧,改 ...

  9. input textarea监听鼠标粘贴

    发现一个问题,在input/textarea中如果是鼠标粘贴内容进去,发现判断不了value的改变,html代码如下: <!doctype html> <html> <h ...

随机推荐

  1. PHP 生成随机字符串与唯一字符串

    说明:生成随机字符串用到的方法有 mt_rand() 生成唯一字符串用到的方法有 md5(),uniqid(),microtime() 代码: <?php /* * 生成随机字符串 * @par ...

  2. CentOS 6.6 安装 PHP Memcached 扩展

    PHP 的 Memcached扩展使用了 libmemcached 库提供的 api 与 memcached 服务端进行交互.它同样提供了一个 session 处理器(memcached). PHP ...

  3. Decimal To Fraction 小数转换成分数

    以0.25为例, 0.25 * 100 = 25, 求25 和 100 的最大公约数gcd. 25/gcd 为分子. 100/gcd为分母. //小数转分数 //0.3 -> 3/10, 0.2 ...

  4. PythonDay02

    >三目运算符 简单的if---else---语句 result = 1234 if 1 > 2 else 4321 print(result) >集合 set集合,是一个无序且不重复 ...

  5. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  6. 应该具备的调试技能(java)

    ------Java部分---------- 1. tomcat在eclispe中怎样启动调试模式2. 带有main方法的Java应用程序怎样启动调试模式3. 调试在eclispe中的快捷键 F5 F ...

  7. FlashFXP5_gr坑爹的故事

    数据中心说已把数据存放到ftp上,但我通过flashfxp5工具链接到ftp server查看数据中心存放的数据,一天了都没有看到数据结果,经过我反复多次重新链接否没有发现数据中心所说的最新数据结果, ...

  8. Leetcode: Find Right Interval

    Given a set of intervals, for each of the interval i, check if there exists an interval j whose star ...

  9. 【Python】 Subprocess module

    1. subprocess.check_output() 2.subprocess.call() 3. subprocess.check_call() the methods 1.2.3 are ar ...

  10. 全网扫描扫描10000端口后的优化脚本&域名列表指定端口的批量测试

    方法一: #coding=utf-8 import urllib2 import threading from time import ctime,sleep print "Start-Ti ...