快捷導(dǎo)航

jQuery往textarea中光標(biāo)所在位置插入文本的方法

更新時(shí)間：2015年06月26日 16:08:40 作者：冥想_

這篇文章主要介紹了jQuery往textarea中光標(biāo)所在位置插入文本的方法,實(shí)例分析了jQuery操作光標(biāo)及文本的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery往textarea中光標(biāo)所在位置插入文本的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<html>
<head>
<script src="jquery-1.8.1.min.js"></script>
<script >
$(function() {
 /* 在textarea處插入文本--Start */
 (function($) {
 $.fn.extend({
   insertContent : function(myValue, t) {
   var $t = $(this)[0];
   if (document.selection) { // ie
    this.focus();
    var sel = document.selection.createRange();
    sel.text = myValue;
    this.focus();
    sel.moveStart('character', -l);
    var wee = sel.text.length;
    if (arguments.length == 2) {
    var l = $t.value.length;
    sel.moveEnd("character", wee + t);
    t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart( "character", wee - t - myValue.length);
    sel.select();
    }
   } else if ($t.selectionStart
    || $t.selectionStart == '0') {
    var startPos = $t.selectionStart;
    var endPos = $t.selectionEnd;
    var scrollTop = $t.scrollTop;
    $t.value = $t.value.substring(0, startPos)
     + myValue
     + $t.value.substring(endPos,$t.value.length);
    this.focus();
    $t.selectionStart = startPos + myValue.length;
    $t.selectionEnd = startPos + myValue.length;
    $t.scrollTop = scrollTop;
    if (arguments.length == 2) {
    $t.setSelectionRange(startPos - t,
     $t.selectionEnd + t);
    this.focus();
    }
   } else {
    this.value += myValue;
    this.focus();
   }
   }
  })
 })(jQuery);
 /* 在textarea處插入文本--Ending */
});
$(document).ready(function(){
 $("#ch_button").click( function () { 
 $("#test_in").insertContent("<upload/day_140627/201406271546349972.jpg>"); 
 });
});
</script>
</head>
<body >
<button id="ch_button" value="插入" >插入</button>
<textarea name="content" id="test_in" rows="30" cols="100">
</textarea>
</body>
</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jquery 實(shí)現(xiàn)彈出層插件
這篇文章主要介紹了Jquery 實(shí)現(xiàn)彈出層插件,包括遮罩層、插件參數(shù)、關(guān)閉動(dòng)作、拖拽效果等，需要的朋友可以參考下
2015-01-01
JQuery的Pager分頁器實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JQuery的Pager分頁器實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-05-05
單擊按鈕發(fā)送驗(yàn)證碼,出現(xiàn)倒計(jì)時(shí)的簡單實(shí)例
下面小編就為大家?guī)硪黄獑螕舭粹o發(fā)送驗(yàn)證碼,出現(xiàn)倒計(jì)時(shí)的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
基于jQuery實(shí)現(xiàn)在線選座之高鐵版
除了購買電影票在線選座，我們還接觸過飛機(jī)機(jī)艙選座，隨著科技的發(fā)展，之后火車、汽車都會(huì)支持在線選座，下面給大家分享基于jQuery實(shí)現(xiàn)在線選座之高鐵版，需要的朋友可以參考下
2015-08-08
jQuery)擴(kuò)展jQuery系列之一模擬alert，confirm（一）
很多人都為了使alert系統(tǒng)的調(diào)用函數(shù)在自己的控制范圍之內(nèi)，都選擇了去封裝一個(gè)屬于自己的alert組件，現(xiàn)在我們就動(dòng)手實(shí)現(xiàn)一個(gè)這樣的小部件。
2010-12-12
jQuery中filter()和find()的區(qū)別深入了解
一直不是很清楚filter()方法和find()方法的區(qū)別，看jQuery Cookbook一書后，終于算是搞清楚了，下面將新的與大家分享下
2013-09-09
JQuery篩選器全系列介紹
jQuery提供了強(qiáng)大的選擇器讓我們獲取對(duì)象。在這邊，我人為地將jQuery選擇器分為兩大部分：選擇對(duì)象和篩選條件。選擇對(duì)象表示要獲取什么對(duì)象，篩選條件是對(duì)獲取的對(duì)象進(jìn)行篩選，最終留下符合某些特征的對(duì)象
2013-08-08
jQuery中innerWidth()方法用法實(shí)例
這篇文章主要介紹了jQuery中innerWidth()方法用法,實(shí)例分析了innerWidth()方法的功能、定義及獲取第一個(gè)匹配元素內(nèi)部區(qū)域?qū)挾鹊氖褂眉记?需要的朋友可以參考下
2015-01-01
JQuery 返回布爾值Is()條件判斷方法代碼
JQuery里面的方法大多是返回JQuery對(duì)角.而Is（）方法，返回的一個(gè)布爾值
2012-05-05
jQuery動(dòng)態(tài)移除和添加背景圖片的方法詳解
這篇文章主要介紹了jQuery動(dòng)態(tài)移除和添加背景圖片的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素樣式及事件響應(yīng)的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2017-03-03