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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHP内置加密函数详解
2016/11/20 PHP
Using the TextRange Object
2006/10/14 Javascript
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
C#笔试题集合
2013/06/21 面试题
装修致歉信
2014/01/15 职场文书
医师定期考核实施方案
2014/05/07 职场文书
实施意见格式范本
2015/06/05 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
如何使用pdb进行Python调试
2021/06/30 Python
Python几种酷炫的进度条的方式
2022/04/11 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python