<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. linux chmod 命令

    Avril 首页 新随笔 管理 随笔 - 153  文章 - 1  评论 - 58 修改linux文件权限命令:chmod   Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何 ...

  2. jquery 判断时间

    $("#gjlycon1").blur(function () {                 var v = $(this).val();                 v ...

  3. Given a compiled machine-language program, which statements in the source language cause the execution of the most machine-language instructions and what is the execution time of these instr

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION A  variety  of  studi ...

  4. Sublime Text3 常用快捷键

    1. 更改变量名的几种方法 a.选中变量,ctrl+d 一个个选择 b.选中变量,alt+F3   2.查找打开过的文件:Ctrl+P,然后输入最近的文件名就可以即时预览到文件内容. 3.ctrl+r ...

  5. 文档生成工具 appledoc

    参考文章 1.安装: $ git clone git://github.com/tomaz/appledoc.git $ cd appledoc $ sudo sh install-appledoc. ...

  6. Spark运行原理解析

    前言: Spark Application的运行架构由两部分组成:driver program(SparkContext)和executor.Spark Application一般都是在集群中运行,比 ...

  7. C++程序设计(一)

    1. 函数指针 程序运行期间,每个函数都会占用一段连续的内存空间.而函数名就是该函数所占内存区域的起始地址(也称"入口地址").我们可以将函数的入口地址赋给一个指针变量,使该指针变 ...

  8. 利用开源jPlayer播放.flv视频文件

    最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...

  9. *BigDecimal初识

    Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处 理16位有效数.在实际应用中,需要对更大或者更小的数进 ...

  10. LeetCode Missing Ranges

    原题链接在这里:https://leetcode.com/problems/missing-ranges/ 题目: Given a sorted integer array where the ran ...