js操作textarea方法集合
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>js操作textarea方法集合</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <style type="text/css">
#testlujun {
width: 348px;
height: 80px;
border: #ddd 1px solid;
background: #fafafa;
padding: 5px 10px;
outline: none;
resize: none;
} </style>
<body>
<textarea id="testlujun">abcdefghijklmnopqrstuvwxyz</textarea>
<br>
<input onclick="alert(TT.getCursorPosition(test))" type="button" value="光标位置">
<input onclick="TT.setCursorPosition(test,3)" type="button" value="设置光标到第3位置">
<input onclick="TT.add(test,'你好')" type="button" value="添加'你好'到光标后面">
<input onclick="TT.del(test,2)" type="button" value="删除光标前2个字符">
<input onclick="TT.del(test,-2)" type="button" value="删除光标后2个字符">
<input onclick="TT.sel(test,0,2)" type="button" value="选中字符0-2的位置">
<input onclick="TT.selString(test,'mno')" type="button" value="选中字符'mno'的位置">
</body>
<script type="text/javascript">
// <![CDATA[
var test = document.getElementById('testlujun');
var TT = {
/*
* 获取光标位置
* @Method getCursorPosition
* @param t element
* @return number
*/
getCursorPosition: function(t) {
if (document.selection) {
t.focus();
var ds = document.selection;
var range = ds.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText(t);
stored_range.setEndPoint("EndToEnd", range);
t.selectionStart = stored_range.text.length - range.text.length;
t.selectionEnd = t.selectionStart + range.text.length;
return t.selectionStart;
} else {
return t.selectionStart;
}
}, /*
* 设置光标位置
* @Method setCursorPosition
* @param t element
* @param p number
* @return
*/
setCursorPosition: function(t, p) {
this.sel(t, p, p);
}, /*
* 插入到光标后面
* @Method add
* @param t element
* @param txt String
* @return
*/
add: function(t, txt) {
var val = t.value;
if (document.selection) {
t.focus();
document.selection.createRange().text = txt;
} else {
var cp = t.selectionStart;
var ubbLength = t.value.length;
var s = t.scrollTop;
// document.getElementById('aaa').innerHTML += s + '<br />';
t.value = t.value.slice(0, t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength);
this.setCursorPosition(t, cp + txt.length);
// document.getElementById('aaa').innerHTML += t.scrollTop + '<br />';
firefox = navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function() {
if (t.scrollTop != s) t.scrollTop = s;
},
0) };
}, /*
* 删除光标 前面或者后面的 n 个字符
* @Method del
* @param t element
* @param n number n>0 后面 n<0 前面
* @return
* 重新设置 value 的时候 scrollTop 的值会被清0
*/
del: function(t, n) {
var p = this.getCursorPosition(t);
var s = t.scrollTop;
var val = t.value;
t.value = n > 0 ? val.slice(0, p - n) + val.slice(p) : val.slice(0, p) + val.slice(p - n);
this.setCursorPosition(t, p - (n < 0 ? 0 : n));
firefox = navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function() {
if (t.scrollTop != s) t.scrollTop = s;
},
10)
}, /*
* 选中 s 到 z 位置的文字
* @Method sel
* @param t element
* @param s number
* @param z number
* @return
*/
sel: function(t, s, z) {
if (document.selection) {
var range = t.createTextRange();
range.moveEnd('character', -t.value.length);
range.moveEnd('character', z);
range.moveStart('character', s);
range.select();
} else {
t.setSelectionRange(s, z);
t.focus();
} }, /*
* 选中一个字符串
* @Method sel
* @param t element
* @param s String
* @return
*/
selString: function(t, s) {
var index = t.value.indexOf(s);
index != -1 ? this.sel(t, index, index + s.length) : false;
} }
// ]]>
</script>
</html>
整理自《封装js操作textarea 方法集合(兼容很好)》
js操作textarea方法集合的更多相关文章
- 【分享】 封装js操作textarea 方法集合(兼容很好)。
请使用下面的btn操作. 虽然你现在看来没什么用,当要用的时候又到处找资料,还不如现在收集一下. 在DOM里面操作textarea里面的字符,是比较麻烦的. 于是我有这个封装分享给大家 ...
- javascript、js操作json方法总结(json字符创转换json对象)
相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资 料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格 ...
- C#操作XML方法集合
一 前言 先来了解下操作XML所涉及到的几个类及之间的关系 如果大家发现少写了一些常用的方法,麻烦在评论中指出,我一定会补上的!谢谢大家 * 1 XMLElement 主要是针对节点的一些属性进行操 ...
- js操作cookie方法
cookie cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109和2965都已废弃,最 ...
- H5移动端JS操作LocalStorage方法
LocalStorage和SessionStorage LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在 ...
- JS数组遍历方法集合
就让我们在逆战中成长吧,加油武汉,加油自己 1.for循环 使用零时变量将长度存起来,当数组较大时优化效果才会比较明显. var ar1=[2,4,6,8] for(var i=0;i<ar1. ...
- C# 操作IIS方法集合
如果在win8,win7情况下报错:未知错误(0x80005000) 见http://blog.csdn.net/ts1030746080/article/details/8741399 using ...
- JS操作SELECT方法
1.判断select选项中 是否存在Value="paraValue"的Item2.向select选项中 加入一个Item3.从select选项中 删除一个Item4.修改sele ...
- js操作json方法总结
相对于前端的老铁来说JSon并不陌生,JSON JavaScript Object Notation 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是一种理想的数据交换格式. json可以 ...
随机推荐
- VC++ 限制窗口的大小范围的方法
响应WM_GETMAXMININFO 的消息 处理之 void CMainFrame::OnGetMinMaxInfo(MINMAXINFO FAR* lpMMI) { // TODO: Add y ...
- 9.springMVC中的拦截器
springMVC中的拦截器大概大致可以分为以下几个步骤去学习: 1.自定义一个类实现HandlerInterceptor接口,这里要了解其中几个方法的作用 2.在springMVC的配置文件中添加拦 ...
- (转载)iOS系统Crash文件分析方法
转自: http://ios-iphone.diandian.com/post/2012-05-18/19440182 Xcode 4.3的symbolicatecrash的位置和老版本的不一致了. ...
- iframe自动适应高度1
js: function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = ...
- NLPP-00-Preparation
NLPP is short for Natural Language Processing with Python <Python 自然语言处理(Natural Language Process ...
- C++主要数据类型在计算机中所占字节大小
遇到了数据存储的大端和小端问题,这你妹的看的一头雾水,发现我基本知识严重匮乏啊,先了解C++各数据类型在自己机子上占多少字节吧,以及这些数据类型所占字节大小与神马有关.各种查资料然后写代码检验,小结于 ...
- python 迭代器和生成器
1.迭代器协议是指:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代 (只能往后走不能往前退)2.可迭代对象:实现了迭代器协议的 ...
- memalign vs malloc - 使用O_DIRECT参数open一个文件并读写
听说使用odirect参数打开文件时能够以扇区的单位进行读写. 于是open了一个块设备文件/dev/sdo,当然还要带上读写参数O_RDWR 然后进行读写时出错了. 找了一会发现问题根本在于读写的b ...
- Grandpa's Estate---POJ1228(凸包)
http://poj.org/problem?id=1228 学长说这是稳定凸包,我感觉就是凸包嘛. 所谓稳定就是判断能不能在原有凸包上加点,得到一个更大的凸包,并且这个凸包包含原有凸包上的所有点.知 ...
- Asp.Net 基础理论
WebForm是微软开发的一款产品,它将用户的请求和响应都封装为控件.让开发者认为自己是在操作一个windows界面.极大地提高了开发效率. 在学习WebForm时,其知识量比WinForm要多,在实 ...