快捷導(dǎo)航

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

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

本實例使用Javascript實現(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)指定位置插入文本-柯樂義</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">
柯樂義 Javascript 在textarea光標(biāo)處插入文本
</textarea>
<input type="button" onclick="insertAtCursor(document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" />
</div></body>
</html>

您可能感興趣的文章:

相關(guān)文章

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