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 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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支持页面回退的两种方法
2008/01/10 PHP
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
全面理解闭包机制
2016/07/11 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
js微信支付实现代码
2016/12/22 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
python爬取m3u8连接的视频
2018/02/28 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
在django模板中实现超链接配置
2019/08/21 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
2015年店长个人工作总结
2015/10/23 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
简单聊聊Golang中defer预计算参数
2022/03/25 Golang