js操作输入框中选择内容兼容IE及其他主流浏览器


Posted in Javascript onApril 22, 2014

工作中遇到需要给输入框中选中的内容增加超链接

function addHref(des){ 
var selectedText=""; 
if(window.getSelection&&des != undefined){//兼容非IE浏览器,由于非IE浏览器需要给定操作的元素ID才可以获取输入元素中选中的内容,因此需要输入ID var textField=document.getElementById(des); 
var selectionStart=textField.selectionStart; 
var selectionEnd=textField.selectionEnd; 
if(selectionStart != undefined && selectionEnd != undefined){ 
selectedText=textField.value.substring(selectionStart,selectionEnd); 
} 
if(selectedText==""){ 
alert("请选择需要添加链接的文字!"); 
return; 
} 
var hyperlinks=prompt("超链接地址:",""); 
if(hyperlinks!=null){ 
var replaceString="<a href='"+hyperlinks+"' target='_blank'><b><u><font color='#686600'>" + selectedText + "</font></u></b></a>"; 
tmpStr=textField.value; 
textField.value=tmpStr.substring(0,selectionStart)+replaceString+tmpStr.substring(selectionEnd,tmpStr.length); 
} 
} 
else if((document.selection)&&(document.selection.type == "Text")){//IE中不需要ID 
var range=document.selection.createRange(); 
var formerElement=range.parentElement(); 
if(formerElement.tagName!="TEXTAREA"){ 
alert("请在指定位置选择需要添加超链接的文字!"); 
return; 
} 
selectedText=range.text; 
var hyperlinks=prompt("超链接地址:",""); 
if(hyperlinks!=null){ 
range.text="<a href='"+hyperlinks+"' target='_blank'><b><u><font color='#686600'>" + selectedText + "</font></u></b></a>"; 
} 
} 
else{ 
alert("请选择需要添加链接的文字!"); 
return; 
} 
}
Javascript 相关文章推荐
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
JQuery live函数
Dec 24 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 #Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 #Javascript
Area 区域实现post提交数据的js写法
Apr 22 #Javascript
div失去焦点事件实现思路
Apr 22 #Javascript
js隐式全局变量造成的bug示例代码
Apr 22 #Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 #Javascript
JavaScript闭包实例讲解
Apr 22 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
PHP安全配置详细说明
2011/09/26 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python多线程学习资料
2012/12/19 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python实现数据写入excel表格
2018/03/25 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
python 读取串口数据的示例
2020/11/09 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
护理工作感言
2014/01/16 职场文书
营销总经理岗位职责
2014/02/02 职场文书
银行授权委托书样本
2014/10/13 职场文书
介绍信格式
2015/01/30 职场文书
python运算符之与用户交互
2022/04/13 Python