<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>无标题页</title>

</head>

<body>

<script type="text/javascript">

    var start=0;

    var end=0;

    function add(){

          alert(start+"/n"+end);

        var textBox = document.getElementById("ta");

        var pre = textBox.value.substr(0, start);

        var post = textBox.value.substr(end);

        textBox.value = pre + document.getElementById("inputtext").value + post;

    }

    function savePos(textBox){

        //如果是Firefox(1.5)的话，方法很简单

        if(typeof(textBox.selectionStart) == "number"){

            start = textBox.selectionStart;

            end = textBox.selectionEnd;

            end = textBox.selectionEnd;

        }

        //下面是IE(6.0)的方法，麻烦得很，还要计算上'/n'

        else if(document.selection){

            var range = document.selection.createRange();

            if(range.parentElement().id == textBox.id){

                // create a selection of the whole textarea

                var range_all = document.body.createTextRange();

                range_all.moveToElementText(textBox);

                //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)

                //range_all.compareEndPoints() 比较两个端点，如果range_all比range更往左(further to the left)，则                //返回小于0的值，则range_all往右移一点，直到两个range的start相同。

                // calculate selection start point by moving beginning of range_all to beginning of range

                for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)

                    range_all.moveStart('character', 1);

                // get number of line breaks from textarea start to selection start and add them to start

                // 计算一下/n

                for (var i = 0; i <= start; i ++){

                    if (textBox.value.charAt(i) == '/n')

                        start++;

                }

                // create a selection of the whole textarea

                 var range_all = document.body.createTextRange();

                 range_all.moveToElementText(textBox);

                 // calculate selection end point by moving beginning of range_all to end of range

                 for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)

                     range_all.moveStart('character', 1);

                     // get number of line breaks from textarea start to selection end and add them to end

                     for (var i = 0; i <= end; i ++){

                         if (textBox.value.charAt(i) == '/n')

                             end ++;

                     }

                }

            }

        document.getElementById("start").value = start;

        document.getElementById("end").value = end;

    }

</script>

<form action="a.cgi">

<table border="1" cellspacing="0" cellpadding="0">

    <tr>

        <td>start: <input type="text" id="start" size="3"/></td>

        <td>end: <input type="text" id="end" size="3"/></td>

    </tr>

    <tr>

        <td colspan="2">

            <textarea id="ta" onkeydown="savePos(this)"

                              onkeyup="savePos(this)"

                              onmousedown="savePos(this)"

                              onmouseup="savePos(this)"

                              onfocus="savePos(this)"

                              rows="14" cols="50"></textarea>

        </td>

    </tr>

    <tr>

        <td><input type="text" id="inputtext" /></td>

        <td><input type="button" onClick="add()" value="Add Text"/></td>

    </tr>

</table>

</form>

</body>

</html>

textarea定位光标的更多相关文章

  1. TextArea中定位光标位置

    原文:TextArea中定位光标位置 在项目中,遇到一个场景:希望能在TextArea中输入某条记录中的明细(明细较简单,没有附属信息,只用记录顺序和值即可,譬如用"+"号来作为明 ...

  2. 【Javascript】在文本框光标处插入文字并定位光标 (转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 怎么让textarea的光标靠左对齐

    1.怎么让textarea的光标靠左对齐: 把<textarea></textarea>之间空隙去掉就可以了. 2.怎么限制textarea的字数,利用maxlength属性限 ...

  4. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  5. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  6. 【转】C#操作word定位光标

    十一.上下左右移动光标位 private void moveLeft() { object moveUnit = Microsoft.Office.Interop.Word.WdUnits.wdWor ...

  7. html元素contenteditable属性如何定位光标和设置光标

    最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...

  8. textarea 在光标处插入文字

    效果演示 // 欢迎访问cssfirefly.cnblogs.com html: <textarea id="text" style="width:500px;he ...

  9. android中定位光标位置

    edittext.setSelection(int); edittext.setText(123);//设置edittext中的内容 edittext.setSelection(123.length( ...

随机推荐

  1. c++双缓冲技术，以避免闪烁绘图

    当数据量非常大时,画图可能须要几秒钟甚至更长的时间,并且有时还会出现闪烁现象,为了解决这些问题.可採用双缓冲技术来画图. 双缓冲即在内存中创建一个与屏幕画图区域一致的对象,先将图形绘制到内存中的这个对 ...

  2. api接口对于客户端的身份认证方式以及安全措施

    转载 基于http协议的api接口对于客户端的身份认证方式以及安全措施 由于http是无状态的,所以正常情况下在浏览器浏览网页,服务器都是通过访问者的cookie(cookie中存储的jsession ...

  3. Appium：通过wifi连接Android设备

    1.首先用USB连接你的Android设备,然后在终端运行命令,它可以启动设备的5555端口使其在网络上可以连接. adb tcpip 2.现在断开USB连接,然后确保设备和你的电脑连接同一个无线网络 ...

  4. 设置CentOS开机连接网络 Centos 开机启动网卡的设置方法

    我们开机网卡不能启动所以只能使用 ifup eth0 (eth0指的网卡) 来启动了,但是每一次都这样感觉不方便希望开机自动启动网卡 后来百度搜索了一下发现可以通过修改网卡( ifcfg-eth0)参 ...

  5. POJ 3390 Print Words in Lines(DP)

    Print Words in Lines Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1624 Accepted: 864 D ...

  6. linux学习书籍

    linux学习书籍推荐 网上看到的,做个标记.没研究过,仅供参考  linux编程学习   inux 学习书目推荐 Linux基础 1.<Linux与Unix Shell 编程指南> C语 ...

  7. c# 播放器 支持所有格式

    原文:c# 播放器 支持所有格式 ---恢复内容开始--- 直接上代码 internal static class LibVlcAPI { internal struct PointerToArray ...

  8. Nodejs使用coffeescript编写的用户注册/登陆代码(MySQL)

    记录一下,以备后用 Settings = require '../../settings.js' exports.register = (req, res) -> nick_name = req ...

  9. Java 多线程之happens-before规则解释

    关于happens-before规则的解释网上有很多,我就不敢班门弄斧了.贴出两篇不错的文章以供学习. 1.happens-before俗解 2.深入Java内存模型--happen-before规则

  10. 【C#版本详情回顾】C#3.0主要功能列表

    隐式类型的本地变量和数组 在与本地变量一起使用时,var 关键字指示编译器根据初始化语句右侧的表达式推断变量或数组元素的类型 对象初始值设定项 支持无需显式调用构造函数即可进行对象初始化 集合初始值设 ...