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实现运行代码需要刷新的解决方法
Aug 18 Javascript
javascript 出生日期和身份证判断大全
Nov 13 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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中使用灵巧的体系结构
2006/10/09 PHP
PHP+javascript液晶时钟
2006/10/09 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
大学生活学习的自我评价
2013/12/03 职场文书
活动总结格式范文
2014/04/26 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
应届生求职信范文
2014/05/26 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
二审答辩状格式
2015/05/22 职场文书
2015中学学校工作总结
2015/07/20 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
Java实现多线程聊天室
2021/06/26 Java/Android
python字典进行运算原理及实例分享
2021/08/02 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js