`
kingmxj
  • 浏览: 185150 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

修改、插入textarea值

阅读更多
/**
 * 替换textarea中的选中的文字
 * @param {Object} replaceStr
 * @return {TypeName} 
 */
var replaceText = function(replaceStr) {

	var textarea = top.document.getElementById('content');
	var rangeData = getCursorPosition(textarea);

	if (rangeData == null) {
		return;
	}
	var i = rangeData.start;
	var all = textarea.value;
	var temp1 = all.substring(0, i);
	var temp2 = all.substring(i);
	var temp3 = replaceStr + temp2.substring(rangeData.text.length);
	textarea.value = temp1 + temp3;
}

/**
 * 获取textarea中的选中的文字
 * @param {Object} textarea
 * @return {TypeName} 
 */
var getCursorPosition = function(textarea) {
	var rangeData = {
		text : "",
		start : 0,
		end : 0
	};
	textarea.focus();
	if (textarea.setSelectionRange) { // W3C
		rangeData.start = textarea.selectionStart;
		rangeData.end = textarea.selectionEnd;
		rangeData.text = (rangeData.start != rangeData.end) ? textarea.value
				.substring(rangeData.start, rangeData.end) : "";
	} else if (top.document.selection) { // IE
		var i, oS = top.document.selection.createRange(),
		// Don't: oR = textarea.createTextRange()
		oR = top.document.body.createTextRange();
		oR.moveToElementText(textarea);

		rangeData.text = oS.text;
		rangeData.bookmark = oS.getBookmark();

		// object.moveStart(sUnit [, iCount])
		// Return Value: Integer that returns the number of units moved.
		for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0
				&& oS.moveStart("character", -1) !== 0; i++) {
			// Why? You can alert(textarea.value.length)
			if (textarea.value.charAt(i) == '\n') {
				i++;
			}
		}
		rangeData.start = i;
		rangeData.end = rangeData.text.length + rangeData.start;
	}

	if (rangeData.text == ""
			|| (rangeData.text.length + 2) == textarea.value.length) {
		return null;
	} else {
		return rangeData;
	}
}

var ContentCurrentPostion=null; //记录当前位置,如果是IE记录的应该是一个rang范围,firefox则记录的是一个位置值

/**
 * 记录插入位置
 * @param {Object} obj
 */
var GetTextAreaPostion = function(obj){     
    if(document.selection){
        obj.focus();
        ContentCurrentPostion=document.selection.createRange(); 
    }
    else if(obj.selectionStart||obj.selectionStart=='0'){
        var startPos=obj.selectionStart;
        var endPos=obj.selectionEnd;
        ContentCurrentPostion=new Object();
        ContentCurrentPostion.startPos=startPos;
        ContentCurrentPostion.endPos=endPos;
    }
    else{
        ContentCurrentPostion=null;
    }    
}

/**
 * 插入值
 * @param {Object} value
 * @param {Object} id
 */
var SetContent = function(value)
{
	var str=value;
	var textarea = top.document.getElementById('content');
	GetTextAreaPostion(textarea);
	if(ContentCurrentPostion!=null) {
		textarea.focus(); 
        if(document.selection) {           
            ContentCurrentPostion.text=str;         
        }else{
            var startPos=ContentCurrentPostion.startPos;
            var endPos=ContentCurrentPostion.endPos;                      
            textarea.value = textarea.value.substring(0,startPos) + str + textarea.value.substring(endPos,textarea.value.length);
 
        }
	} else {
		textarea.value+=str;
    }    
};
分享到:
评论

相关推荐

    JS在textarea光标处插入文本的小例子

    然后,根据这些位置,构建新的textarea值,并更新光标位置。 此外,考虑到在插入文本时可能改变的滚动条位置,函数还保存了`scrollTop`,在插入文本后恢复滚动条位置,以保持用户的视野不变。 在HTML部分,`...

    JavaScript获取,设置光标位置,兼容InputTextArea

    如果要在特定位置插入文本,可以先保存旧的光标位置,插入文本,然后更新光标位置: ```javascript let oldCursorPos = input.selectionStart; input.value = input.value.slice(0, oldCursorPos) + '新文本' + ...

    关于使用Textarea的注意事项

    不过,在需要跨浏览器兼容性的场景下,开发者应该尽量避免使用innerHTML属性来修改Textarea的值。 简而言之,Textarea的使用需要注意以下几点: 1. 在IE及其他浏览器中,使用innerHTML属性可能会引发兼容性问题。 2...

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    但是,作者也提到原生JavaScript可以达到同样的效果,因此鼓励有需要的开发者进行适当的修改。 最后,为了兼容Chrome浏览器,代码中进行了额外的判断和操作。根据Chrome浏览器的行为特点,可能需要调整获取光标位置...

    js 修改 fck 编辑器的值

    ### js 修改 FCK 编辑器的值 #### 背景介绍 FCKeditor(现更名为 CKEditor)是一款广泛使用的富文本编辑器,它能够为网页提供强大的文本编辑功能,支持图片插入、表格制作等多种高级操作。在 Web 开发过程中,经常...

    关于js对textarea换行符的处理方法浅析

    尽管这个表达式在语法上是正确的,但它不会改变`textarea.value`的原始值,因为`replace`方法不会就地修改字符串,而是返回一个新的字符串。如果你想要替换所有`\n`,你需要赋值回`textarea.value`: ```javascript...

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

    在Vue.js开发过程中,有时我们会遇到一个问题:直接通过JavaScript操作HTML元素的值,比如修改文本框的`value`属性,却发现这些更改并未反映到Vue的数据模型中。这是因为Vue采用的是数据驱动视图的模式,它依赖于...

    关于文本编辑器设置值和获取值

    文本编辑器是软件开发中常见的工具,用于创建、编辑和修改文本内容,尤其在Web开发中,它们常常被用于创建富文本,即包含多种格式如字体、颜色、图像等内容的文本。本文将深入探讨如何在文本编辑器中设置和获取值,...

    Js 获取和修改FCKeditor的值的代码

    ### Js 获取和修改FCKeditor的值的代码详解 #### 一、概述 FCKeditor是一款功能强大的富文本编辑器,被广泛应用于Web应用程序中,为用户提供了一个接近桌面编辑器的体验。通过JavaScript,我们可以轻松地与...

    JS实现在文本指定位置插入内容的简单示例

    总结来说,JS实现在文本指定位置插入内容的示例,演示了如何在不破坏用户界面连续性和输入连贯性的前提下,实现文本的动态修改。掌握这一技能对于前端开发者来说是十分有价值的,它广泛应用于富文本编辑器、表单输入...

    wc-editor:一个编辑器Web组件,它报告其值的特定更改

    唯一可见的元素是插入符号和选择(如果有)。 编辑器的内容由位于其下方的div呈现,并且其跨度可以上色并格式化为粗体,斜体,下划线,删除线等。 原生行为 由于输入以及键盘和鼠标的处理均使用本机textarea ,...

    第6章 Dreamweave中表格和表单的应用.pptx

    6. **插入或删除行/列**:同样在“修改”-“表格”菜单中,可以方便地增加或减少表格的行列数,以调整表格结构。 7. **格式化表格**:使用“命令”-“格式化表格”功能,可以快速统一表格的样式,如调整边框宽度、...

    jQuery评论框插入QQ表情代码

    通过jQuery的`val`方法可以方便地在输入框中添加或修改值。 最后,为了让用户能够预览插入的表情,我们可以添加一个简单的解析函数,将输入框中的表情代码替换为对应的图片: ```javascript function parseEmojis...

    ckeditor的详细配置

    ckeditor是一个免费且开源的JavaScript库,它提供了丰富的文本编辑功能,如文字样式调整、图片插入、表格绘制等,能够极大地丰富网页的交互性和美观度。为了在项目中使用ckeditor,首先需要将其添加到页面中: 1. *...

    2021-2022计算机二级等级考试试题及答案No.14072.docx

    2. 在编程中,设置命令按钮无效通常通过修改控件的`Enabled`属性来实现。 3. 在Access数据库中,实体通常由记录表示,而字段代表实体的属性,表则是记录的集合。 4. CRT显示器是传统显示器类型,确实称为阴极射线管...

    前端小工具 - js模拟键盘、鼠标事件给element form批量赋值

    例如,对于`el-input`,可以直接修改`value`属性,或者使用`$refs.input.setValue('新值')`。 ```javascript document.getElementById('inputId').value = '新值'; // 或者,如果是Element UI的输入框 this.$refs....

    waveGeneral:音频解析标注框架

    #https 2018-01-23质检框赋值质检不可以修改标注框标明判断合格不合格状态不能修改判断统计值添加文字统计值2018-01-08音频封闭删除保存问题音频验证样音播放样音保存统计变更无效原因快捷符号插入数据保存2018-01-...

    第32章 DataGrid(数据表格)组件[5]1

    - `onAfterEdit`: 用户完成编辑一行后触发,提供编辑行的索引、行数据以及更改后的字段/值对。 6. **自定义编辑器** 通过扩展`$.fn.datagrid.defaults.editors`,我们可以自定义编辑器,如上述代码中扩展了'...

    详解jQuery获取特殊属性的值以及设置内容

    无论是获取表单元素的值、读取或修改HTML内容、测量元素的尺寸,还是获取窗口的尺寸,这些方法都能够提供便捷的途径。通过实践应用这些知识点,可以显著提高前端开发的效率,同时也有助于编写更加稳定和优化的代码。...

Global site tag (gtag.js) - Google Analytics