JavaScript为input/textarea自定义hover,focus效果
<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效果的更多相关文章
- input/select/textarea标签的readonly效果实现
首先说一下readonly属性的应用场景 表单中,不能编辑对应的文本,但是仍然可以聚焦焦点 在提交表单的时候,该输入项会作为form的一项提交(目的) 这里要说一下disabled和readonly的 ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- 【前端JS】input textarea 默认文字,点击消失
如题.前端页面的 input textarea 有时候须要显示默认文字以提示用户,下面为实现代码,以 input 为例.textarea 能够直接搬用 HTML <input type=&quo ...
- javascript实现在textarea光标位置插入文字并移动光标到文字末尾
1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...
- Salesforce 开发整理(十一) 自定义放大镜查找效果
有时候在自定义的visualforce页面上,需要实现系统标准的查找样式,当不能使用标准的style的时候,我们只能选择自定义实现,下面分享一个demo,预览效果如下: 实现代码,Visualforc ...
- 设置输入域(input/textarea)中文本光标的位置
以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末.这种需求往往在修改现有的文本.有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法. 这个方法 ...
- 修改 input / textarea placeholder 属性的颜色和字体大小
话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; fon ...
- 移动端-webkit-user-select:none导致input/textarea输入框无法输入
这个问题,也算是个大坑了. 最开始的开始,是因为我们在做大装盘活动的时候,发现在ios上面出现了这样的问题:点击“转”按钮,ios上面会有延迟并且会出现图片的阴影,这个肯定就不好看了撒,然后,找吧,改 ...
- input textarea监听鼠标粘贴
发现一个问题,在input/textarea中如果是鼠标粘贴内容进去,发现判断不了value的改变,html代码如下: <!doctype html> <html> <h ...
随机推荐
- 为什么Visual Studio的安装目录下有名为1033或2052的文件夹?
一直不清楚MS诸多产品的安装目录下为什么总有个名为1033或者2052的目录 搜索一下才知道,原来叫 LCID(Locale ID,区域性标识符) 常见的如:1033表示英语(美国),2052表示中文 ...
- ArcGIS Server 增加缓存路径
Server缓存服务,由于缓存文件经常比较大,默认放在C盘下容易导致磁盘空间不够,因此Server提供了增加缓存路径的方法来解决该问题. 增加的路径有两种,一种是Server所在服务器增加一个和原缓存 ...
- react-native win7环境搭建
时间:2016-08-22 晚,西安 1.安装jdk java version "1.6.0_45"Java(TM) SE Runtime Environment (build 1 ...
- Android MP3录音实现
给APP做语音功能,必须考虑到IOS和Android平台的通用性.wav录音质量高,文件太大,AAC和AMR格式在IOS平台却不支持,所以采用libmp3lame把AudioRecord音频流直接转换 ...
- 针对ajax执行后swiper特效无法执行解决方案
ajax执行后重新绑定swiper事件.
- NSString(或者说是UILabel)加入 “行间距” 之后的 “高度”计算
一.首先,写一个工具类(NSString的分类,增加两个功能,计算高度宽度) #import "NSString+Extension.h" @implementation NSSt ...
- T-sql创建表,插入数据
SET NOCOUNT ON; USE hibernateSqlServer GO IF OBJECT_ID('Orders') IS NOT NULL DROP TABLE Orders; GO I ...
- Synchronized 个人深解
1.synchronized方法相当于synchronized(this) Synchronized 方法是锁的当前对象,同一个对象的2个synchronized方法被2个线程调用会发生 ...
- 存储过程:当基站ID大于1000的时候,把ID通过存储过程插入表,然后处理
不推荐这么弄,没办法,项目逼到这了,以后尽量避免这样的需求发生! CREATE OR REPLACE PROCEDURE insert_tempStation_proc(v_instr in clob ...
- 简要介绍Apache、php、mysql安装和工具介绍
1 安装Apache 网站:www.Apache.org下载相应的Apache,目前下载了近期的:httpd-2.2.15-win32-x86-openssl-0.9.8msi 安装简要步骤如下图: ...