使用jquery給input和textarea設(shè)定ie中的focus
更新時(shí)間：2008年05月29日 19:43:56 作者：
在瀏覽網(wǎng)站的過程中，我們經(jīng)常可以看見當(dāng)鼠標(biāo)點(diǎn)擊后樣式改變的文本框和文本域,那么這種效果是如何實(shí)現(xiàn)的呢?
今天在做我們的表單提交部分的時(shí)候,遇到了這個(gè)問題,于是,用傳說中的jquery就可以解決了.
這里主要說的是在IE下的focus的問題,因?yàn)樵趂irefox中是支持
input:focus
textarea:focus
在IE下:focus是無效的,所以，我們要在點(diǎn)擊以后給input和textarea加上新的樣式以配合實(shí)現(xiàn):focus效果.
我們首先來看下效果:
來看下這個(gè)效果中的JS:
<script language="javascript">
$(document).ready(
function(){if($.browser.msie){
$("input[@type='text'], input[@type='password'], textarea").focus(function() {$(this).css({background:"#FFFFF7"});})
$("input[@type='text'], input[@type='password'], textarea").blur(function() {$(this).css({background:"#fff"});})
}});
</script>
CSS這里這樣定義:
input,textarea{border: 1px solid #CCC;}
input:focus,textarea:focus{background:#FFFFF7;}
這是jquery的一個(gè)很簡單的應(yīng)用,我也是初學(xué),多多交流...
這里主要說的是在IE下的focus的問題,因?yàn)樵趂irefox中是支持
復(fù)制代碼 代碼如下:
input:focus
textarea:focus
在IE下:focus是無效的,所以，我們要在點(diǎn)擊以后給input和textarea加上新的樣式以配合實(shí)現(xiàn):focus效果.
我們首先來看下效果:
來看下這個(gè)效果中的JS:
<script language="javascript">
$(document).ready(
function(){if($.browser.msie){
$("input[@type='text'], input[@type='password'], textarea").focus(function() {$(this).css({background:"#FFFFF7"});})
$("input[@type='text'], input[@type='password'], textarea").blur(function() {$(this).css({background:"#fff"});})
}});
</script>
CSS這里這樣定義:
input,textarea{border: 1px solid #CCC;}
input:focus,textarea:focus{background:#FFFFF7;}
這是jquery的一個(gè)很簡單的應(yīng)用,我也是初學(xué),多多交流...
您可能感興趣的文章:
- jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
- jQuery textarea的長度進(jìn)行驗(yàn)證
- JQuery為textarea添加maxlength屬性的代碼
- jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法
- textarea中的手動(dòng)換行處理的jquery代碼
- Jquery實(shí)現(xiàn)點(diǎn)擊按鈕,連續(xù)地向textarea中添加值的實(shí)例代碼
- jQuery替換textarea中換行的方法
- TextArea不支持maxlength的解決辦法(jquery)
- 基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識(shí)別)
- jquery實(shí)現(xiàn)限制textarea輸入字?jǐn)?shù)的方法
相關(guān)文章
這篇文章主要介紹了15個(gè)jquery常用方法、小技巧分享,本文總結(jié)了一些開發(fā)中常用的方法,例如獲取td的行標(biāo)和列標(biāo)、判斷是否是回車按下、全選和反選等,需要的朋友可以參考下2015-01-01
jQuery實(shí)例—選項(xiàng)卡的簡單實(shí)現(xiàn)(js源碼和jQuery)
下面小編就為大家?guī)硪黄猨Query實(shí)例—選項(xiàng)卡的簡單實(shí)現(xiàn)(js源碼和jQuery) 。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了jQuery控制網(wǎng)頁打印指定區(qū)域的方法,涉及jQuery操作html元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
Easyui 去除jquery-easui tab頁div自帶滾動(dòng)條的方法
這篇文章主要介紹了Easyui 去除jquery-easui tab頁div自帶滾動(dòng)條的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
本文是利用EasyUI實(shí)現(xiàn)下拉框多選功能，在ComboxTree其原有的基礎(chǔ)上對(duì)樣式進(jìn)行了改進(jìn)，樣式表已上傳demo，下面跟著小編一起來看下吧2017-01-01
本文給大家分享的是使用jQuery制作的模仿百度時(shí)間軸特效的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-07-07
jQuery EasyUI API 中文文檔 - Documentation 文檔
jQuery EasyUI API 中文文檔 - Documentation 文檔，使用jQuery EasyUI的朋友可以參考下。2011-09-09
html+jQuery實(shí)現(xiàn)拖動(dòng)滑塊圖片拼圖驗(yàn)證碼插件【移動(dòng)端適用】
這篇文章主要介紹了html+jQuery實(shí)現(xiàn)拖動(dòng)滑塊圖片拼圖驗(yàn)證碼插件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
jQuery+html5+css3實(shí)現(xiàn)圓角無刷新表單帶輸入驗(yàn)證功能代碼
這篇文章主要介紹了jQuery+html5+css3實(shí)現(xiàn)圓角無刷新表單帶輸入驗(yàn)證功能代碼,加入了html5與css3技術(shù),使得整個(gè)表單效果更加唯美華麗,需要的朋友可以參考下2015-08-08
jQuery中Ajax全局事件引用方式及各個(gè)事件(全局/局部)執(zhí)行順序
這篇文章主要介紹了jQuery中Ajax全局事件引用方式及各個(gè)事件(全局/局部)執(zhí)行順序的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06