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

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


复制代码 代码如下:

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;
}
}

时间: 2014-04-21

Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法

遇到的问题: laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的问题(safari下也有同样问题); 解决办法: 给laydate绑定id; 解决前代码: <input id="startTime" placeholder="请输入开始时间" class="laydate-icon" onClick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'

jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法

使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE10以下版本中是以HEX格式显示[#ffff00],而IE10,.Chrome.Firefox中则是以GRB格式显示[rgb(255,0,0)],由于需要对颜色值进行判断处理,所以需要得到统一的颜色格式,最好是HEX格式的,方便处理点.搜索了一下,从国外的一个网站上得到一段代码: 复制代码 代码如下: $.fn.getHexBackgroundColor = function() {    var rgb

jQuery实现响应浏览器缩放大小并改变背景颜色

/*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();

关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

firefox 和 ie 的浏览器各自实现了input历史记录的功能,可以简化输入时的麻烦,但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如号码查询的input框,用户不会对同一个号码进行多次查询,就没有必要让浏览器记录. MSIE自定义了input 的扩展属性 autocomplete,置为off即可 <input type="text" autocomplete="off" id="number&qu

JS中解决谷歌浏览器记住密码输入框颜色改变功能

谷歌浏览器记住密码输入框颜色会改变,并且字体颜色会变成黑色,如图 输入框原来的样式是这样的 然而记住密码后,输入框颜色就变成了黄色,并且字体变成了黑色 这是由于谷歌浏览器的自带样式的缘故: input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); background-image: none; color: rgb(0, 0,

JS实现的按钮点击颜色切换功能示例

本文实例讲述了JS实现的按钮点击颜色切换功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击切换按钮颜色</title> </head> <body> <button id=

在Koa.js中实现文件上传的接口功能

文件上传是一个基本的功能,每个系统几乎都会有,比如上传图片.上传Excel等. 那么在Node Koa应用中如何实现一个支持文件上传的接口呢? 本文从环境准备开始.最后分别用 Postman 和一个HTML页面来测试. 01-环境准备 首先当然是要初始化一个Koa项目了,安装 Koa.koa-router 即可. npm install koa koa-router 设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 public 文件夹,目录结构如下: koa-upload/

angular.js中解决跨域问题的三种方式

前言 开始本文之前,大家应该首先了解,协议.主机名和端口号相同叫同源.同源策略允许页面从同一个站点加载和执行特定的脚本.站外其他来源的脚本同页面的交互则被严格限制. 要解决这个问题就需要跨域,本文介绍解决angular中的跨域的三种方式: 一.JSONP JSONP的原理是通过 <script> 标签发起一个GET请求来取代XHR请求.JSONP生成一个<script> 标签并插到DOM中,然后浏览器会接管并向 src 属性所指向的地址发送请求.当服务器返回请求时, 响应结果会被包

Vue.js中轻松解决v-for执行出错的三个方案

前言 Vue.js 是开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js在近年来受到一定程度的关注,目前在 GitHub上已经有5000+. 本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助.下面来看看详细的介绍: [问题描述] v-for遍历数组中存在空值导致页面报错,情况如下: 开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断: ▪ removeChild操作既然不是发生在开发者显示

VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析

本文实例讲述了VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法.分享给大家供大家参考,具体如下: 业务场景 我们在使用vue 编写 代码时,我们有一个 多行文本框控件,希望在页面点击一个按钮 在 文本框焦点位置插入一个 {pk}的数据. 发现插入 这个数据后,这个数据并没有同步到 数据中,但是直接通过键盘输入,就可以改变数据. 原因分析 在通过 JS 修改控件的value 数据后,并没有触发到数据更新. 解决办法 Vue.component('rx-textarea', {

JS中改变this指向的方法(call和apply、bind)

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

js中Number数字数值运算后值不对的解决方法

问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎么可能多出这么小数点出来. 我Google了一下,发现原来这是JavaScript浮点运算的一个bug. 比如:7*0.8 JavaScript算出来就是:5.6000000000000005 解决方法:网上找到了一些解决办法,就是重新写了一些浮点运算的函数. 下面就把这

JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

IE中new Date(strDate)返回无效时间解决方式: 方法一: function getDateForStringDate(strDate){ //切割年月日与时分秒称为数组 var s = strDate.split(" "); var s1 = s[0].split("-"); var s2 = s[1].split(":"); if(s2.length==2){ s2.push("00"); } return

完美解决node.js中使用https请求报CERT_UNTRUSTED的问题

只要调用了没有受信的https就会报错:CERT_UNTRUSTED 简单的解决方法就是设置环境变量回避非授信证书的问题. 只要在请求的代码之前加上如下代码即可: process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"; 结束!!! 以上就是小编为大家带来的完美解决node.js中使用https请求报CERT_UNTRUSTED的问题全部内容了,希望大家多多支持我们~