在一个textarea 中,鼠标焦点在任意文字后面,然后点击一个按钮,就往textarea中输入固定的文字
需要兼容多种浏览器
textarea中有 一段文字 "1234567890"
我把鼠标焦点设置在4后面,点击一个button按钮,在 4字后面自动添加固定文字 "你好",
文本内容变成 "1234你好567890"
//获取选中的内容
function getSelectionField(e) {
var selection = getIeSelection(e);
if (selection == '') {
selection = getFireFoxSelection(e);
}
return selection;
}
function getIeSelection(e) {
if (window.getSelection) {
// This technique is the most likely to be standardized.
// getSelection() returns a Selection object, which we do not document.
return window.getSelection().toString();
}
else if (document.getSelection) {
// This is an older, simpler technique that returns a string
return document.getSelection();
}
else if (document.selection) {
// This is the IE-specific technique.
// We do not document the IE selection property or TextRange objects.
return document.selection.createRange().text;
}
}
function getFireFoxSelection(e) {
if (e.selectionStart != undefined && e.selectionEnd != undefined) {
var start = e.selectionStart;
var end = e.selectionEnd;
return e.value.substring(start, end);
} else {
return "";
} // Not supported on this browser
}
//在e元素的当前光标位置插入文本
//var cursPos;
function insertText(e, str) {
var cursPos = TraceCursorPosition(e); // 获取光标位置
e.value = e.value.slice(0, cursPos.start) + str + e.value.slice(cursPos.end)
}
// 跟踪光标位置
function TraceCursorPosition(obj) {
var cursPos = $CursorPosition(obj);
return cursPos;
}
// 返回光标所在位置
/**//*
* source:
* source:
* 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] };
}
///e=document.getElementById('textboxid'); s=插入的值.
insertText(e, s);
相关推荐
网站图片轮播代码,个人推荐使用。觉得还可以。
Onselect:当文字加亮后,产生该文件 <input type="text" value="郭强" {value=''}" (value=='') {value='\u90ed\u5f3a'}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 <input type=...
jQuery点击图片弹出层显示文字是一款鼠标点击图片弹出焦点图跟文字描述特效代码。
实例059 自动选择文本框/编辑框中的文字 102 实例060 按下回车键时自动切换焦点 103 2.2 下拉列表/菜单 104 实例061 获取下拉列表/菜单的值 104 实例062 遍历多选择下拉列表 105 实例063 在下拉列表中进行多选移除 ...
Onchange:当文字值改变时,产生该事件Onselect:当文字加亮后,产生该文件 郭强" onfocus="if(value==''郭强'') {value=''''}" onblur="if (value=='''') {value=''郭强''}">点击时文字消失,失去焦点时文字再出现 2...
jquery一个加载设置拥有9种过度效果的超级smooth slider焦点图代码,可左右翻页,有圆点导航,可添加文字说明和链接
文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 onpropertychange 当属性...
45:___大幅JS焦点图切换 46:___左右切换鼠标可控的无缝图片滚动代码 47:___平滑图片滚动 48:___很有意思的图片分裂复制效果 49:___按比例缩放图片,JavaScript代码 50:___最简的JavaScript鼠标经过切换图片 51:___...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
Onselect:当文字加亮后,产生该文件 (value=='mm) {value=''}" onblur="if (value=='') {value='mm'}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 郭强" size=10 class=s02 style=...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
Onselect:当文字加亮后,产生该文件 (value=='mm) {value=''}" onblur="if (value=='') {value='mm'}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 郭强" size=10 class=s02 style="background-...
Onselect:当文字加亮后,产生该文件 (value=='mm) {value=''}" onblur="if (value=='') {value='mm'}">点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 郭强" size=10 class=s02 style="background-...
23、原生JavaScript光标停在文字的后面,文本框获得焦点时调用 24、原生JavaScript检验URL链接是否有效 25、原生JavaScript格式化CSS样式代码 26、原生JavaScript压缩CSS样式代码 27、原生JavaScript获取当前路径 28...
开发人员常用js大全,1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件
很好很实用的JavaScript代码 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件
47.当在超链接中调用JS函数时用:(javascript:)来开头后面加函数名 48.在老的浏览器中不执行此JS:<!-- //--> 49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"> 50.指定在不支持脚本的浏览器显示...
示例描述:JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...