js实现在文本框光标处添加字符的方法介绍


Posted in Javascript onNovember 24, 2012
<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)" />

<%@ 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>
Javascript 相关文章推荐
JS判断字符串包含的方法
May 05 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
JS验证码实现代码
Sep 14 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 #Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 #Javascript
js 如何实现对数据库的增删改查
Nov 23 #Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 #Javascript
IE下使用cloneNode注意事项分享
Nov 22 #Javascript
jquery remove方法应用详解
Nov 22 #Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
python中import reload __import__的区别详解
2017/10/16 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
python实现canny边缘检测
2020/09/14 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
数控专业应届生求职信
2013/11/27 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
图书借阅制度范本
2015/08/06 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
delete in子查询不走索引问题分析
2022/07/07 MySQL