快捷導(dǎo)航

jQuery 在光標(biāo)定位的地方插入文字的插件

更新時(shí)間：2012年05月10日 22:14:56 作者：

jQuery 在光標(biāo)定位的地方插入文字的插件的實(shí)現(xiàn)代碼，通過獲取光標(biāo)位置，然后插入文字

核心代碼:

 
(function($){ 
$.fn.extend({ 
"insert":function(value){ 
//默認(rèn)參數(shù) 
value=$.extend({ 
"text":"123" 
},value); 
var dthis = $(this)[0]; //將jQuery對象轉(zhuǎn)換為DOM元素 
//IE下 
if(document.selection){ 
$(dthis).focus(); //輸入元素textara獲取焦點(diǎn) 
var fus = document.selection.createRange();//獲取光標(biāo)位置 
fus.text = value.text; //在光標(biāo)位置插入值 
$(dthis).focus(); ///輸入元素textara獲取焦點(diǎn) 
} 
//火狐下標(biāo)準(zhǔn) 
else if(dthis.selectionStart || dthis.selectionStart == '0'){ 
var start = dthis.selectionStart; 　　 //獲取焦點(diǎn)前坐標(biāo) 
var end =dthis.selectionEnd; 　　//獲取焦點(diǎn)后坐標(biāo) 
　　　　//以下這句，應(yīng)該是在焦點(diǎn)之前，和焦點(diǎn)之后的位置，中間插入我們傳入的值 .然后把這個(gè)得到的新值，賦給文本框 
　　　　　　dthis.value = dthis.value.substring(0, start) + value.text + dthis.value.substring(end, dthis.value.length); } 
　　　　//在輸入元素textara沒有定位光標(biāo)的情況 
　　　　　　else{ 
　　　　　　　　　　this.value += value.text; this.focus(); 
　　　　　　}; 
　　　　　　return $(this); 
　　　　} 
　　}) 
})(jQuery) 

主要思路：
　　當(dāng)點(diǎn)擊某個(gè)元素的時(shí)候，讓一個(gè)輸入框，插入指定的值。？
　　1.當(dāng)點(diǎn)擊某個(gè)元素的時(shí)候，應(yīng)該讓輸入框獲取焦點(diǎn)，因?yàn)橹挥蝎@得了焦點(diǎn)，才能在里面輸入值；
　　IE下：document.selection.createRange()
　　FF下：var start = dthis.selectionStart; 　　 //獲取焦點(diǎn)前坐標(biāo)
　　　　　var end =dthis.selectionEnd; 　　 //獲取焦點(diǎn)后坐標(biāo)
　　2.獲取當(dāng)前輸入框焦點(diǎn)的位置
　　3.將值插入到輸入框焦點(diǎn)的位置;
　　4.再次獲取焦點(diǎn)；保證光標(biāo)在輸入框內(nèi)
在線演示： http://demo.jb51.net/js/2012/myfocustext/
打包下載： http://www.fzitv.net/jiaoben/44153.html

您可能感興趣的文章:

相關(guān)文章

jQuery事件注冊的實(shí)現(xiàn)示范
jQuery為我們提供了方便的事件注冊機(jī)制，它的優(yōu)點(diǎn)，操作簡單，且不用擔(dān)心事件覆蓋等問題。缺點(diǎn)，普通的事件注冊不能做事件委托，且無法實(shí)現(xiàn)事件解綁，需要借助其他方法
2022-07-07
基于JQuery實(shí)現(xiàn)滾動到頁面底端時(shí)自動加載更多信息
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)滾動到頁面底端時(shí)自動加載更多信息，類似微博，新浪新聞的評論等，都采用了這方法,需要的朋友可以參考下
2014-01-01
超贊的jQuery圖片滑塊動畫特效代碼匯總
本文將為大家收集10個(gè)超贊的jQuery圖片滑塊動畫,都是小編精挑細(xì)選而來，希望這些現(xiàn)成的jQuery插件將為你節(jié)省很多開發(fā)時(shí)間。
2016-01-01
juqery 學(xué)習(xí)之三選擇器可見性元素屬性
juqery 學(xué)習(xí)之三選擇器可見性元素屬性，需要的朋友可以參考下。
2010-11-11
跟著JQuery API學(xué)Jquery 之二屬性
在選擇器的API學(xué)習(xí)中，走馬觀花的把選擇器過了一遍，但是選擇歸選擇，選擇出來了沒干什么事，也沒有什么用嘛
2010-04-04
jQuery如何設(shè)置背景顏色
這篇文章主要介紹了jQuery如何設(shè)置背景顏色，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
JQuery頁面地址處理插件jqURL詳解
這篇文章主要介紹了JQuery頁面地址處理插件jqURL詳解的相關(guān)資料,需要的朋友可以參考下
2015-05-05
jQuery實(shí)現(xiàn)的簡單分頁示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單分頁,涉及jQuery數(shù)學(xué)運(yùn)算與頁面元素操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06
jquery 中toggle的2種用法詳解(推薦)
下面小編就為大家?guī)硪黄猨query 中toggle的2種用法詳解(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
jQuery1.6 正式版發(fā)布并提供下載
據(jù)jQuery官方博客5月3日的最新消息，jQuery 1.6 正式版已經(jīng)可以下載使用。jQuery 1.6 版本包括了對屬性(Attribute)模型的重要重寫，還有諸多性能優(yōu)化。借此機(jī)會感謝jQuery開發(fā)團(tuán)隊(duì)和jQuery錯(cuò)誤分類團(tuán)隊(duì)的成員。
2011-05-05