替换文本框文字html,js替换选中的文字,兼容所有浏览器 |
您所在的位置:网站首页 › html替换文本代码 › 替换文本框文字html,js替换选中的文字,兼容所有浏览器 |
替换选中的文本,分两种情况:HTML中的文本、输入框中的文本。输入框就是input和textarea,这里以textarea文本域为例。 import.png 替换HTML中选择的文本 {#替换html中选择的文本} 写一段文字 这是一段测试文字,测试HTML中替换选择的文本 加一个按钮 js方法 /** * 替换选择的文本,不支持textarea和input */ function boldSelection(text) { if (document.selection) { // 老IE var selecter = document.selection.createRange(); selecter.select(); var selectStr = selecter.text; //获取选中文本 selecter.pasteHTML(text); //替换为HTML元素,替换完会失去选取,如果选择的是textarea里的内容这里会报错 } else { // 非老IE var selecter; if (window.getSelection()) { selecter = window.getSelection(); } else { selecter = document.getSelection(); } selecter = document.getSelection(); var selectStr = selecter.toString(); if (selectStr.trim() != "") { var rang = selecter.getRangeAt(0); // temp成为选中内容的父节点,达到加粗的效果 var temp = document.createElement('b'); rang.surroundContents(temp); // 先删除再插入达到替换的效果, rang.deleteContents(); // 删除选中内容 rang.insertNode(document.createTextNode(text)); //在选中内容的起始位置插入一个节点 // chrome中的bug,如果选中的是textarea中的内容,就会在textarea前面插入节点 } } } 查看效果 2017-09-25_17-25-58.gif 替换输入框中选择的文本 加一个textarea,写入默认文字 οnkeydοwn="savePos(this)" οnkeyup="savePos(this)" οnmοusedοwn="savePos(this)" οnmοuseup="savePos(this)" οnfοcus="savePos(this)" >这是一段测试文字,测试文本域中替换选择的文本。如果末尾是空格 ,替换后把空格补上。 加一个按钮 js代码 /** * 保存选中位置,用于老IE */ function savePos(editor) { // 判断对象是否支持某方法:if (对象.方法名) {} 方法名后不必带() if (editor.createTextRange && document.selection) { // 老IE if(document.selection.createRange) { editor.caretPos = document.selection.createRange().duplicate(); } } /** * 替换选择的文本用于input 和 textarea */ function replaceSelection(name, text) { // 获取编辑器textarea对象 var editor = document.getElementById(name); if (!editor) { var editors = document.getElementsByName(name); if (editors && editors.length>0) { editor = editors[0]; } } if (!text) { // 如果没传递文本就不执行 editor.focus(); //归还焦点 return false; } if (editor.createTextRange && editor.caretPos) { // 老IE editor.focus(); // 防止无限扩选 var selectStr = editor.caretPos.text; if (selectStr && selectStr.substring(selectStr.length - 1)==" ") { text += " "; // 右边多选中一个空格,替换后再补一个空格,优化编辑体验 } editor.caretPos.text = text; } else if (editor.setSelectionRange) { // 非老IE,利用选区的开始索引和结束索引重新拼串,而不是直接操作选取,达到替换选取的目的 // 获取选中的问题 var selectionStart; // textarea选中文本的开始索引 var selectionEnd; // textarea选中文本的结束索引 selectionStart = editor.selectionStart; selectionEnd = editor.selectionEnd; var selectStr = editor.value.substring(selectionStart, selectionEnd); if (selectStr && selectStr.substring(selectStr.length - 1)==" ") { text += " "; } var leftStr = editor.value.substring(0, selectionStart); var rightStr = editor.value.substring(selectionEnd, editor.value.length); editor.value = leftStr + text + rightStr; //重新选中新文本 selectionEnd = selectionStart + text.length; editor.setSelectionRange(selectionStart, selectionEnd); //非IE浏览器必须获取焦点 editor.focus(); } } 查看效果 2017-09-25_17-34-10.gif 存在的Bug 程序中的bug就像哲学中讲的矛盾,都是普遍存在的,无法彻底解决。bug不一定要真的解决,可以用其它方法回避,只要不影响使用,也是可以接受的。下面是存在的bug: 1、chrome浏览器中,焦点再textare上,点击替换HTML选择的文本,就会在textarea前面增加AAA 2、IE8中bug较多,应该是浏览器原因,只能做到这样了 焦点再textarea外,点击替换文本域中的文本,有时就会在textarea上增加AAA 文本域通过双击选择单词,点替换文本域中的文本,选中后新文本依然是选择状态;而通过拉动光标选中的文本,替换后会失去选中状态 替换HTML中选中的文本,替换后会失去选中状态 在IE11中较为正常,无明显bug。如下是bug演示 Chrome里的bug chromebug.gif IE8里的bug iebabug.gif |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |