textarea在光标位置插入文字
最近开发类似计算器界面，需要在textarea中编辑公式，涉及到 在光标位置插入 字符。
效果如下：
+ - * / 添加文字
html代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
</head>
<body> <textarea rows="8" cols="35" id="areaId"> </textarea>
<p></p>
<button class="btn btn-sm btn-purple" onclick="addExpressContent('+')">+</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent('-')">-</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent('*')">*</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent('/')">/</button>
<button class="btn btn-sm btn-purple" onclick="addExpressContent('测试文字')">添加文字</button> <script>
/**
* 添加内容
*/
function addExpressContent(str){
var obj = document.getElementById("areaId");
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var cursorPos = startPos;
var tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
</script>
</body>
</html>
textarea在光标位置插入文字的更多相关文章
- javascript实现在textarea光标位置插入文字并移动光标到文字末尾
1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾 如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉. 2.思路: & ...
- textarea 在光标处插入文字
效果演示 // 欢迎访问cssfirefly.cnblogs.com html: <textarea id="text" style="width:500px;he ...
- textarea光标处插入文字
(function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...
- JQ在光标处插入文字
内容转载自网络这是一个JQ的扩展方法.在teatarea获得焦点时,往光标处插入文字,扩展代码如下 (function($){ $.fn.extend({ "insert":fun ...
- js 在光标位置插入内容
原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...
- 将richTextBox中的内容写入txt文件发现不换行(解决方法)，在richTextBox指定位置插入文字
string pathname = dt.ToString().Replace(":", ""); string str = richTextBoxResult ...
- 【Javascript】在文本框光标处插入文字并定位光标 (转)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div 可编辑--获取光标位置插入元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Language" ...
- JQuery在光标位置插入内容
(function($) { $.fn.extend({ insertAtCaret: function(myValue) { var $t = $(this)[0]; //IE if (docume ...
随机推荐
- css(html)背景图优化合并
图片本身的优化: 图像质量要求和图像文件大小决定你用什么格式的图片,用较小的图片文件呈现较好的图像质量. 当图片色彩过于丰富且无透明要求时,建议采用jpg格式并保存为较高质量. 当图片色彩过于丰富又有 ...
- libiconv2.dll
一.问题描述 在我使用MinGW的mingw32-make工具的时候,提示错误“libiconv-2.dll找不到”. 二.问题解决 1.从脚本之家下载“libiconv-2.dll”,下载地址“ht ...
- JVM 找出最耗 cpu的线程 并打印线程栈
监控JVM中最占cpu的线程 top -Hp pid JVM中最占cpu的线程ID -o THREAD,tid,time | awk 'BEGIN {count=0; } { if($2>0.3 ...
- utube视频落地
utube视频落地 简单粗暴的方法: 利用视频下载网站的网页版进行处理. 比如需要下载的视频的url是vid_url, 需要用到的web服务的url是web_service vid_url='http ...
- CSS3------background-size（背景图片尺寸属性）
background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage. 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围.那么 ...
- POJ 2992 Divisors
每个数都可以分解成素数的乘积: 写成指数形式:n=p1^e1*p2^e2*...*pn^en:(p都是素数) 那么n的因数的数量m=(e1+1)*(e2+1)*...*(en+1): 所以用筛选法筛出 ...
- 李洪强iOS开发之-Swift_00_介绍
SWIFT (计算机编程语言) Swift,苹果于2014年WWDC(苹果开发者大会)发布的新开发语言,可与Objective-C*共同运行于Mac OS和iOS平台,用于搭建基于苹果平台的应用程序. ...
- ASP.NET Web API 2 入门(一)
前言 HTTP 不是只是为了服务的 web 页.这也是建设公开服务和数据的 Api 的强大平台.HTTP 是简单的. 灵活的和无处不在.你能想到的几乎任何平台有 HTTP 库,因此,HTTP 服务可以 ...
- 深入了解View实现原理以及自定义View详解
下面几篇文章对View的原理讲的非常详细. Android LayoutInflater原理分析,带你一步步深入了解View(一) Android视图绘制流程完全解析,带你一步步深入了解View(二) ...
- Android Training精要（七）内存管理
在2.3.3及以下版本: 通過定義兩個整形變量來檢測bitmap是否display過或者已經在緩存中 下面的代碼當bitmap滿足兩個條件就被回收掉: 1. 兩個整形變量都變為0 2. bitmap不 ...