<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. switch多分支语句

    1.switch多分支语句的语法 switch(表达式){ case 常量值:要执行的语句; break; case 常量值:要执行的语句; break; case 常量值:要执行的语句; break ...

  2. dubbo 试用全过程

    概述: dubbo服务容器是一个standalone的启动程序,因为后台服务不需要Tomcat或JBoss等Web容器的功能,如果硬要用Web容器去加载服务提供方,增加复杂性,也浪费资源. 服务容器只 ...

  3. AFNetworking 3.0 版本使用

    原创:http://www.zhimengzhe.com/IOSkaifa/38653.html AFNetworking 3.0 版本使用 在Xcode7.0之后,苹果废弃了NSURLConnect ...

  4. Mongo聚合函数

    { "_id" : ObjectId("57301c7e5fd5d6e2afa221d1"), "a" : "张三", ...

  5. Wordpress本地伪静态设置

    遇到的问题: 在主题的目录页,用wordpress默认链接方式是的,但是改了固定链接结构为:/%post_id%.html后,就访问不了了,开始以为是我主题的问题,然后切换为官方主题也是访问不了,而神 ...

  6. centos7安装出现license information(license not accepted)解决办法

    若出现license information(license not accepted),即说明需要同意许可信息,输入1-回车-2-回车-c-回车-c回车,即可解决.

  7. 谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH PKG_CONFIG_PATH

    谈谈Linux下动态库查找路径的问题 ldconfig LD_LIBRARY_PATH  PKG_CONFIG_PATH 转载自:http://blog.chinaunix.net/xmlrpc.ph ...

  8. Spring task executor同异步

    1. spring提供了哪些任务执行器,是否有同步的任务执行器 有ThreadPoolTaskExecutor等执行器 同步可以用SyncTaskExecutor,但这个可以说不算一个线程池,因为还在 ...

  9. Log4j用法

    本篇仅仅是简单介绍了在写一个测试例子时,怎么使用log4j的经验,如果用于生产环境,估计还需要在深入一步去了解更多详细的配置信息. log4j.properties 配置信息: log4j.rootL ...

  10. Tomcat 使用Redis存储Session

    Tomcat Redis Session Github 地址. 下载 commons-pool2-2.2.jar,jedis-2.5.2.jar,tomcat-redis-session-manage ...