通過javascript在光標處插入文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--http://community.csdn.net/Expert/TopicView3.asp?id=5649731-->

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Insert Text into TextBox at Cursor Position by Javascript</title>

<script type="text/javascript">

var cursPos; // 窗口全局變量,保存目標 TextBox 的最後一次活動光標位置

function insertText() {

var txt1 = document.getElementById("Text1");

var txt2 = document.getElementById("Text2");

//debugger;

if(!cursPos) TraceCursorPosition(txt2); // 獲取光標位置

txt2.value = txt2.value.slice(0, cursPos.start) +

txt1.value + txt2.value.slice(cursPos.end)

}

// 跟蹤光標位置

function TraceCursorPosition(obj)

{

//debugger;

cursPos = $CursorPosition(obj);

}

// 返回光標所在位置

/**//*

* source: http://blog.csdn.net/liujin4049/archive/2006/09/19/1244065.aspx

* source: http://www.devdao.com

* acknowledges for Marshall

* example:

* var myTextBox = document.getElementById("MyTextBoxID");

* var cursPos = $CursorPosition(myTextBox);

* alert(cursPos.item[0] + " " + cursPos.item[1]);

* // OR

* alert(cursPos.start + " " + cursPos.end);

*/

function $CursorPosition(textBox){

var start = 0, end = 0;

//如果是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 ++;

}

}

}

//return [start, end]; // 包括選中區域的起始位置

// modified to return as Object

return {"start": start, "end": end, "item": [start, end]};

}

</script>

</head>

<body>

input :<input id="Text1" type="text" /><input id="Button1" type="button" value="Insert" onclick="insertText()" /><br />

output:<textarea id="Text2" cols="40" rows="10" onkeydown="TraceCursorPosition(this)" onkeypress="TraceCursorPosition(this)" onfocus="TraceCursorPosition(this)" onselect="TraceCursorPosition(this)" onmouseover="TraceCursorPosition(this)" onmousedown="TraceCursorPosition(this)">hello world!</textarea><br />

</body>

</html>

Javascript 插入 UBB標簽 到表單 文本域 函數 及演示 By shawl.qiu
/**/Subject: Javascript 插入 UBB標簽 到表單 文本域 函數 及演示 By shawl.qiu摘要: 本文演示了使用 JS函數 動態插入 UBB 標簽到 表單文本域的操作.本文並沒有演示進行 UBB 標簽轉換爲 HTML 標簽的操作說明:HTML編...查看完整版>>Javascript 插入 UBB標簽 到表單 文本域 函數 及演示 By shawl.qiu
 
改變插入光標的閃爍速度
問題  對于大多數用戶來說,插入光標或編輯光標閃爍得太塊或太慢都會使他們不易辨別,因此希望能夠允許用戶來定制插入光標的閃爍速度,以便他們能夠較容易地閱讀編輯框中的文本並找到它們相應的位置。方法  在 W...查看完整版>>改變插入光標的閃爍速度
 
Javascript控制文本框的輸入法切換
今天忽然遇到一個棘手的問題,用戶通過Web系統錄入數據時本應該是使用全角輸入法的,但用戶在錄入時一部分使用了半角,導致系統出現問題(至于問題的細節就不講了),網上遊了半天,找到很多方法,因爲是使用的是asp.net,所以...查看完整版>>Javascript控制文本框的輸入法切換
 
用JavaScript編寫程序實現文本的滾動一例
  在一些網頁上,們經常看到一些滾動文本,很酷的,如何做呢?下面我們就以徐志摩的一首《再別康橋》爲例,用javascript編寫一段程序,來實現文本的滾動。1. 運行Dreamweaver應用程序,單擊工具欄中的“顯示代碼視...查看完整版>>用JavaScript編寫程序實現文本的滾動一例
 
[Javascript]限制文本輸入框只能輸入0-9數字
摘要:限制文本輸入框只能輸入0-9數字可以用Javascript對文本框進行檢查,過濾掉非0-9的字符。 <script language="javascript" event="onkeydown" for="document"> if(event.srcElement.name=='TextBo...查看完整版>>[Javascript]限制文本輸入框只能輸入0-9數字
 
[Javascript]限制文本輸入框只能輸入0-9數字
可以用Javascript對文本框進行檢查,過濾掉非0-9的字符。 <script language="javascript" event="onkeydown" for="document"> if(event.srcElement.name=='TextBox1') ...查看完整版>>[Javascript]限制文本輸入框只能輸入0-9數字
 
讓你的n-gage的文本短信能插入更多logo
讓你的n-gage的文本短信能插入更多logo
n-gage的文本短信有個很強大的功能:就是能夠插入黑白圖片(logo).可惜,默認的logo只有4個,太少了. 我們可以發現,這4個logo文件在c:\nokia\images\pictures裏面,文件後綴名爲ota.只要往裏面增加ota文件,就能增加log...查看完整版>>讓你的n-gage的文本短信能插入更多logo
 
Dreamweaver8文本的插入與編輯
     這篇教程爲“Dreamweaver 8 入門經典教程”的一部分。查看全套教程>>>>>。  1、插入文本  要向 Dreamweaver 文檔添加文本,可以直接在Dreamweaver“文檔”窗口中鍵...查看完整版>>Dreamweaver8文本的插入與編輯
 
Authorware插入文本的四種方法
  方法一:利用Authorware本身的文字工具來進行插入。先打開一個展示窗口,然後點擊工具箱裏的文字工具,再到窗口中點擊一下,接著就可以在窗口中輸入文字了,然後再利用Authorware自帶的文字處理功能進行處理。 ...查看完整版>>Authorware插入文本的四種方法
 
 
回到王朝網路移動版首頁