快捷導(dǎo)航

JS在textarea光標(biāo)處插入文本的小例子

更新時(shí)間：2013年03月22日 09:30:55 作者：

本實(shí)例使用Javascript實(shí)現(xiàn)在textarea光標(biāo)處插入文本,支持多種瀏覽器

下面是代碼:

--------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS在文本域鼠標(biāo)指定位置插入文本-柯樂(lè)義</title>
<script type="text/javascript">
function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//MOZILLA/NETSCAPE support 
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
// save scrollTop before insert www.keleyi.com
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0) {
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
} 
</script>
</head>
<body>
<div style="width:500px;margin-left:auto;margin-right:auto;margin-top:100px;">
<textarea id="keleyi_com" style="width:340px; height:180px">
柯樂(lè)義 Javascript 在textarea光標(biāo)處插入文本
</textarea>
<input type="button" onclick="insertAtCursor(document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" />
</div></body>
</html>

您可能感興趣的文章:

相關(guān)文章

swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法
假設(shè)當(dāng)前顯示的是1，往左滑動(dòng)一個(gè)遞減1，往右滑動(dòng)一個(gè)遞增1。下面通過(guò)實(shí)例代碼給大家講解swiper動(dòng)態(tài)改變滑動(dòng)內(nèi)容的實(shí)現(xiàn)方法，感興趣的朋友一起看看吧
2018-01-01
JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果)實(shí)例代碼
這篇文章主要介紹了offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
js實(shí)現(xiàn)點(diǎn)擊圖片自動(dòng)提交action的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)點(diǎn)擊圖片自動(dòng)提交action的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
IE event.srcElement和FF event.target 功能比較
可以捕獲當(dāng)前事件作用的對(duì)象，如event.srcElement.tagName可以捕獲活動(dòng)標(biāo)記名稱。
2010-03-03
JS異步編程方法的6種方案總結(jié)
異步是指進(jìn)程不需要一直等下去,而是繼續(xù)執(zhí)行下面的操作,不用管其他進(jìn)程的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于JS異步編程方法的6種方案,需要的朋友可以參考下
2023-01-01
javascript圖片預(yù)覽和上傳（兼容IE）
這篇文章主要為大家詳細(xì)介紹了javascript圖片預(yù)覽和上傳的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例
二維碼分享功能大多是由后端實(shí)現(xiàn)的,對(duì)服務(wù)器的負(fù)載較重,這里有一個(gè)前端實(shí)現(xiàn)的版本，本文介紹了JavaScript實(shí)現(xiàn)的微信二維碼圖片生成器的示例，有需要的可以了解一下。
2016-10-10
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁(yè)背景色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕切換網(wǎng)頁(yè)背景色的方法,涉及JavaScript基于鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
uniapp使用scroll-view實(shí)現(xiàn)左右上下滑動(dòng)功能
最近在用uni-app開(kāi)發(fā)小程序時(shí),需要用scroll-view做出左右上下滑動(dòng)效果,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用scroll-view實(shí)現(xiàn)左右上下滑動(dòng)功能的相關(guān)資料,需要的朋友可以參考下
2022-11-11
JavaScript判斷是否為數(shù)字的多種方法小結(jié)
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的多種方法小結(jié),本文給大家分享三種方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01