首頁 > 開發者 > JavaScript

javascript下擷取textarea的游標位置，並插入資料

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

把下面代碼儲存成 js檔案，或在html頁面中加入到<head></head>之間哦。

 代碼如下 複製代碼

var start=0;

var end=0;

function add(){

var textBox = document.getElementById("ta");

var pre = textBox.value.substr(0, start);

var post = textBox.value.substr(end);

textBox.value = pre + document.getElementById("inputtext").value + post;

}

function savePos(textBox){

//如果是Firefox(1.5)的話，方法很簡單

if(typeof(textBox.selectionStart) == "number"){

start = textBox.selectionStart;

end = textBox.selectionEnd;

}

//下面是IE(6.0)的方法，麻煩得很，還要計算上'n'

else if(document.selection){

var range = document.selection.createRange();

if(range.parentElement().id == textBox.id){

// create a selection of the whole textarea

var range_all = document.body.createTextRange();

range_all.moveToElementText(textBox);

//兩個range，一個是已經選擇的text(range)，一個是整個textarea(range_all)

//range_all.compareEndPoints()比較兩個端點，如果range_all比range更往左(further to the left)，則 //返回小於0的值，則range_all往右移一點，直到兩個range的start相同。

// calculate selection start point by moving beginning of range_all to beginning of range

for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)

range_all.moveStart('character', 1);

// get number of line breaks from textarea start to selection start and add them to start

// 計算一下n

for (var i = 0; i <= start; i ++){

if (textBox.value.charAt(i) == 'n')

start++;

}

// create a selection of the whole textarea

var range_all = document.body.createTextRange();

range_all.moveToElementText(textBox);

// calculate selection end point by moving beginning of range_all to end of range

for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)

range_all.moveStart('character', 1);

// get number of line breaks from textarea start to selection end and add them to end

for (var i = 0; i <= end; i ++){

if (textBox.value.charAt(i) == 'n')

end ++;

}

}

}

document.getElementById("start").value = start;

document.getElementById("end").value = end;

}

html代碼如下

 代碼如下 複製代碼

<form action="a.cgi">

<table border="1" cellspacing="0" cellpadding="0">

<tr>

<td>start: <input type="text" id="start" size="3"/></td>

<td>end: <input type="text" id="end" size="3"/></td>

</tr>

<tr>

<td colspan="2">

<textarea id="ta" onKeydown="savePos(this)" onKeyup="savePos(this)" onmousedown="savePos(this)" onmouseup="savePos(this)"

onfocus="savePos(this)" rows="14" cols="50"></textarea>

</td>

</tr>

<tr>

<td><input type="text" id="inputtext" /></td>

<td><input type="button" onClick="add()" value="Add Text"/></td>

</tr>

</table>

</form>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More