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 相关文章推荐
javascript import css实例代码
Jul 18 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
BootStrap 页签切换失效的解决方法
Aug 17 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 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
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
token 机制和实现方式
2020/12/15 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python3实现表白神器
2019/04/09 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
优秀少先队员主要事迹材料
2014/05/28 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
教师节座谈会主持词
2015/07/03 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技