JS在TextArea光標(biāo)位置插入文字并實現(xiàn)移動光標(biāo)到文字末尾
更新時間:2013年06月21日 16:28:12 作者:
JS在TextArea光標(biāo)位置插入文字+移動光標(biāo)到文字末尾,F(xiàn)irefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd屬性,具體實現(xiàn)如下,感興趣的朋友可以參考下哈
=IE支持document.selection
=Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd屬性
function insertText(obj,str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function moveEnd(obj){
obj.focus();
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character',len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
<input type="button" onclick="insertText(document.getElementById('text'),' 新文字—YoyiorLee ')" value="插入文字"></input>
<input type="button" onclick="moveEnd(document.getElementById('text'))" value="移到末尾"></input>
=Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd屬性
復(fù)制代碼 代碼如下:
function insertText(obj,str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function moveEnd(obj){
obj.focus();
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character',len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
復(fù)制代碼 代碼如下:
<input type="button" onclick="insertText(document.getElementById('text'),' 新文字—YoyiorLee ')" value="插入文字"></input>
復(fù)制代碼 代碼如下:
<input type="button" onclick="moveEnd(document.getElementById('text'))" value="移到末尾"></input>
您可能感興趣的文章:
- JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
- js獲取光標(biāo)位置和設(shè)置文本框光標(biāo)位置示例代碼
- 用javascript獲取textarea中的光標(biāo)位置
- 用javascript獲取當(dāng)頁面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對象的代碼
- JavaScript 獲取/設(shè)置光標(biāo)位置,兼容Input&&TextArea
- javascript獲得光標(biāo)所在的文本框(text/textarea)中的位置
- textbox 在光標(biāo)位置插入字符功能的js實現(xiàn)(兼容ie,firefox)
- javascript控制在光標(biāo)位置插入文字適合表情的插入
- Javascript實現(xiàn)獲取及設(shè)置光標(biāo)位置的方法
- 往光標(biāo)所在位置插入值的js代碼
- js實現(xiàn)的光標(biāo)位置工具函數(shù)示例
相關(guān)文章
JavaScript 仿關(guān)機(jī)效果的圖片層
最近發(fā)現(xiàn)了一用 YUI 做的 Lightbox, 只需少量的設(shè)置就能類Window關(guān)機(jī)的效果來顯示圖片。2008-12-12window.location.href = window.location.href 跳轉(zhuǎn)無反應(yīng) a超鏈接onclic
js下window.location.href = window.location.href 跳轉(zhuǎn)無反應(yīng) a 超鏈接 onclick 點擊跳轉(zhuǎn)無反應(yīng)問題的解決方法2013-08-08JS基于構(gòu)造函數(shù)實現(xiàn)的菜單滑動顯隱效果【測試可用】
這篇文章主要介紹了JS基于構(gòu)造函數(shù)實現(xiàn)的菜單滑動顯隱效果,可實現(xiàn)基本的菜單折疊與展開功能,涉及javascript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06JavaScript引擎實現(xiàn)async/await的方法實例
大家應(yīng)該都知道隨著Node 7的發(fā)布,越來越多的人開始研究據(jù)說是異步編程終級解決方案的async/await,下面這篇文章主要給大家介紹了關(guān)于JavaScript引擎是如何實現(xiàn)async/await的相關(guān)資料,需要的朋友可以參考下2022-03-03詳解微信小程序與內(nèi)嵌網(wǎng)頁交互實現(xiàn)支付功能
這篇文章主要介紹了詳解微信小程序與內(nèi)嵌網(wǎng)頁交互實現(xiàn)支付功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10