js實(shí)現(xiàn)在文本框光標(biāo)處添加字符的方法介紹
更新時(shí)間：2012年11月24日 15:17:17 作者：
在開發(fā)應(yīng)用中，經(jīng)常會(huì)遇到一些技術(shù)上的問題，比如：怎樣讓js在文本框光標(biāo)處添加字符，本文將以此問題進(jìn)行詳細(xì)介紹，需要了解的朋友可以參考下
復(fù)制代碼 代碼如下:
<script language="javascript" type="text/javascript">
function Button4_onclick(obj) {
obj.focus();
var rng=document.selection.createRange();
rng.setEndPoint("StartToStart",obj.createTextRange());
var eng=document.selection.createRange();
eng.setEndPoint("EndToEnd",obj.createTextRange());
var kone = document.getElementByIdx("Text1");
kone.value=rng.text + "插入字符" + eng.text;
}
</script>
<input id="Text1" type="text" value="1235467890"/>
<input id="Button4" type="button"
value="button" onclick="return Button4_onclick(Text1)" />
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" AspCompat="true" CodeBehind="WebForm1.aspx.cs"
Inherits="SJLERP.WebForm1" %>
<!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">
<script type="text/javascript">
function setCaret(textObj) {
if (textObj.createTextRange) {
textObj.caretPos = document.selection.createRange().duplicate();
}
}
function insertAtCaret(textObj, textFeildValue) {
if (document.all) {
if (textObj.createTextRange && textObj.caretPos) {
var caretPos = textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? textFeildValue + ' ' : textFeildValue;
} else {
textObj.value = textFeildValue;
}
} else {
if (textObj.setSelectionRange) {
var rangeStart = textObj.selectionStart;
var rangeEnd = textObj.selectionEnd;
var tempStr1 = textObj.value.substring(0, rangeStart);
var tempStr2 = textObj.value.substring(rangeEnd);
textObj.value = tempStr1 + textFeildValue + tempStr2;
} else {
alert("This version of Mozilla based browser does not support setSelectionRange");
}
}
}
</script>
<form id="form1" action="" onsubmit="" method="post" enctype="text/plain">
<p>
<textarea name="tarea" rows="" cols="" style="width:300px;height:120px;"
onselect="setCaret(this);"
onclick="setCaret(this);"
onkeyup="setCaret(this);" >例子例子例 Forget Never 子例子例子 asp.net </textarea>
<br/><br/>
<input type="text" name="textfield" style="width:220px;" value="插入FireFox"/>
<br/>
<input type="button" value="插入"
onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
</p>
</form>
</html>
相關(guān)文章
淺析Javascript的自動(dòng)分號(hào)插入(ASI)機(jī)制
我們大家都知道在寫java和c時(shí)，必須要在語句后加分號(hào)，否則編譯通不過。而js不同，存在自動(dòng)分好插入機(jī)制，下文簡稱ASI。它會(huì)給源代碼的 token 流自動(dòng)插入分號(hào)。下面這篇文章我們就來談?wù)凧avascript的自動(dòng)分號(hào)插入(ASI)機(jī)制。2016-09-09
微信小程序 JS動(dòng)態(tài)修改樣式的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序JS動(dòng)態(tài)修改樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
JavaScript實(shí)現(xiàn)簡單的日歷效果
本文給大家分享的是一個(gè)簡單的JavaScript制作的日歷模板，小伙伴們可以根據(jù)自己的需求，繼續(xù)補(bǔ)充，希望大家能夠喜歡2016-09-09
一個(gè)JS函數(shù)搞定網(wǎng)頁標(biāo)題(title)閃動(dòng)效果
這篇文章主要介紹了使用JS函數(shù)實(shí)現(xiàn)網(wǎng)頁標(biāo)題(title)閃動(dòng)效果的代碼,需要的朋友可以參考下2014-05-05
js獲取URL的參數(shù)的方法(getQueryString)示例
getQueryString方法默認(rèn)返回的是 string如果是int類型，則JS使用的時(shí)候，要進(jìn)行轉(zhuǎn)換一下，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-09-09
javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)不同顏色Tab標(biāo)簽切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
window.open 以post方式傳遞參數(shù)示例代碼
這篇文章主要介紹了window.open以post方式傳遞參數(shù)的方法,需要的朋友可以參考下2014-02-02
el-table el-table-column表頭嵌套循環(huán)數(shù)據(jù)的示例代碼
本文介紹了使用兩個(gè)數(shù)組來實(shí)現(xiàn)el-table中表頭的嵌套循環(huán),一個(gè)數(shù)組用于循環(huán)表格數(shù)據(jù),另一個(gè)用于循環(huán)表頭,幫助讀者更好地理解和應(yīng)用表頭嵌套功能,感興趣的朋友跟隨小編一起看看吧2024-09-09
詳解JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換
在JavaScript中，數(shù)據(jù)類型的轉(zhuǎn)換是一項(xiàng)常見的任務(wù)，不同的數(shù)據(jù)類型之間需要相互轉(zhuǎn)換以滿足程序的需求，本篇博客將深入探討JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換，包括隱式轉(zhuǎn)換和顯式轉(zhuǎn)換的概念、轉(zhuǎn)換規(guī)則和常見的數(shù)據(jù)類型轉(zhuǎn)換示例2023-06-06
使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳
這篇文章主要介紹了使用plupload自定義參數(shù)實(shí)現(xiàn)多文件上傳的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07