jquery聚焦文本框與擴展文本框聚焦方法
更新時間：2012年10月12日 11:05:33 作者：
在不同的瀏覽器中，一個文本框，如果只是直接給文本框設置focus()，那么光標聚焦的位置可能是在最前面。下面的代碼則是給jquery擴展一個textFocus方法
光標聚焦的位置在最前面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery聚焦文本框 -腳本之家</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form action="http://www.baidu.com" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-7740261255677392:7064996710" />
<input type="hidden" name="ie" value="UTF-8" />
<!--文本框--><input type="text" name="q" size="25" />
<input type="submit" name="sa" value="搜索" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("input[name='q']").focus();
})</script>
</body>
</html>
jquery擴展文本框聚焦方法
在不同的瀏覽器中，一個文本框，如果只是直接給文本框設置focus()，那么光標聚焦的位置可能是在最前面。下面的代碼則是給jquery擴展一個textFocus方法，用于聚焦文本框，并使光標在最后，使用$("input").textFocus()。也可以傳入一個數(shù)字參數(shù)，設置光標聚焦的位置。如$("input").textFocus(2)，則光標在在第二個字符后面。
(function($){
$.fn.textFocus=function(v){
var range,len,v=v===undefined?0:parseInt(v);
this.each(function(){
if($.browser.msie){
range=this.createTextRange(); //文本框創(chuàng)建范圍
v===0?range.collapse(false):range.move("character",v); //范圍折疊
range.select(); //選中
}else{
len=this.value.length;
v===0?this.setSelectionRange(len,len):this.setSelectionRange(v,v); //dom直接設置選區(qū)，然后focus
}
this.focus();
});
return this;
}
})(jQuery)
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery聚焦文本框 -腳本之家</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form action="http://www.baidu.com" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-7740261255677392:7064996710" />
<input type="hidden" name="ie" value="UTF-8" />
<!--文本框--><input type="text" name="q" size="25" />
<input type="submit" name="sa" value="搜索" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("input[name='q']").focus();
})</script>
</body>
</html>
jquery擴展文本框聚焦方法
在不同的瀏覽器中，一個文本框，如果只是直接給文本框設置focus()，那么光標聚焦的位置可能是在最前面。下面的代碼則是給jquery擴展一個textFocus方法，用于聚焦文本框，并使光標在最后，使用$("input").textFocus()。也可以傳入一個數(shù)字參數(shù)，設置光標聚焦的位置。如$("input").textFocus(2)，則光標在在第二個字符后面。
復制代碼 代碼如下:
(function($){
$.fn.textFocus=function(v){
var range,len,v=v===undefined?0:parseInt(v);
this.each(function(){
if($.browser.msie){
range=this.createTextRange(); //文本框創(chuàng)建范圍
v===0?range.collapse(false):range.move("character",v); //范圍折疊
range.select(); //選中
}else{
len=this.value.length;
v===0?this.setSelectionRange(len,len):this.setSelectionRange(v,v); //dom直接設置選區(qū)，然后focus
}
this.focus();
});
return this;
}
})(jQuery)
相關文章
這篇文章主要介紹了jQuery實現(xiàn)仿京東防抖動菜單效果,結合實例形式分析了jQuery事件響應及頁面屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹的是自己用jQuery寫了一個圖片的馬賽克消失效果實現(xiàn)過程,需要的朋友可以參考下2014-05-05
網(wǎng)上基于jQuery的表單驗證插件已有很多，但是這個輪子我還是繼續(xù)做一個，因為這個表單驗證插件是從我以前的個人JS框架移值過來的（我已慢慢投入jQuery的懷抱），并且它的驗證規(guī)則書寫方式也許會讓你眼前一亮。2009-12-12
jQuery實現(xiàn)對網(wǎng)頁節(jié)點的增刪改查功能示例
這篇文章主要介紹了jQuery實現(xiàn)對網(wǎng)頁節(jié)點的增刪改查功能,涉及jQuery針對網(wǎng)頁DOM節(jié)點的獲取、屬性修改等相關操作技巧,需要的朋友可以參考下2017-09-09
基于jquery的大眾點評，分類導航實現(xiàn)代碼，需要的朋友可以參考下。2011-08-08
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)圖片文字淡入淡出效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
下面小編就為大家?guī)硪黄猨Query獲取當前點擊的對象元素(實現(xiàn)代碼)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
下面小編就為大家?guī)硪黄猨QueryUI Sortable 應用Demo(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Jquery樹插件zTree用法入門教程,實例分析了zTree插件的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
全面解析DOM操作和jQuery實現(xiàn)選項移動操作代碼分享
這篇文章主要介紹了DOM操作和jQuery實現(xiàn)選項移動操作代碼分享的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06