FineUI 官方论坛

标题: 怎么样获取TextArea 光标所在位置 [打印本页]
作者: 蓝色天空    时间: 2013-5-27 17:14
标题: 怎么样获取TextArea 光标所在位置
怎么样获取TextArea  光标所在位置 ,想用代码执行在光标位承认文本内容
(最好是.net 后台代码操作)
作者: sanshi    时间: 2013-5-27 17:55
获取光标位置这样的操作只能在前台实现了，网上搜下了，应该有现成的实现
作者: 蓝色天空    时间: 2013-5-28 14:52
sanshi 发表于 2013-5-27 17:55
获取光标位置这样的操作只能在前台实现了，网上搜下了，应该有现成的实现 ...
  1. <script type="text/javascript" defer="defer">
  2.     var nad = '<%=Text_DT_HTML.ClientID%>';
  3.     function onReady() {//添加事件

  5.         $('#' + nad).keydown(function (event) {
  6.             getCursorPosition(nad);
  7.         });
  8.         $('#' + nad).keyup(function (event) {
  9.             getCursorPosition(nad);
  10.         });
  11.         $('#' + nad).mousedown(function (event) {
  12.             getCursorPosition(nad);
  13.         });
  14.         $('#' + nad).mouseup(function (event) {
  15.             getCursorPosition(nad);
  16.         });
  17.         $('#' + nad).focus(function (event) {
  18.             getCursorPosition(nad);
  19.         });
  20.     }

  22.     function getCursorPosition(obj) {//获取光标位置
  23.         var evt = window.event ? window.event : getTa1CursorPosition.caller.arguments[0];
  24.         var oTa1 = document.getElementById(obj);
  25.         try {
  26.             if (oTa1.value == "")
  27.                 return 0;
  28.             var cursurPosition = -1;
  29.             if (oTa1.selectionStart) {//非IE浏览器
  30.                 cursurPosition = oTa1.selectionStart;
  31.             } else {//IE

  33.                 var rngSel = document.selection.createRange();//建立选择域
  34.                 var rngTxt = oTa1.createTextRange();//建立文本域
  35.                 var flag = rngSel.getBookmark();//用选择域建立书签
  36.                 rngTxt.collapse();//瓦解文本域到开始位,以便使标志位移动
  37.                 rngTxt.moveToBookmark(flag);//使文本域移动到书签位
  38.                 rngTxt.moveStart('character', -oTa1.value.length);//获得文本域左侧文本
  39.                 cursurPosition = rngTxt.text.replace(/\r\n/g, '').length;//替换回车换行符
  40.             }
  41.             //return cursurPosition;
  42.         }
  43.         catch (e) {
  44.             cursurPosition = oTa1.value.length;
  45.         }

  47.         document.getElementById("<%=TextBox_gb.ClientID%>").innerText = cursurPosition;
  48.     }


  51.     function setCaretPosition(pos) {//设置光标位置函数
  52.         var ctrl = nad;
  53.         if (ctrl.setSelectionRange) {
  54.             ctrl.focus();
  55.             ctrl.setSelectionRange(pos, pos);
  56.         }
  57.         else if (ctrl.createTextRange) {
  58.             var range = ctrl.createTextRange();
  59.             range.collapse(true);
  60.             range.moveEnd('character', pos);
  61.             range.moveStart('character', pos);
  62.             range.select();
  63.         }
  64.     }
  65. </script>
复制代码
js搞定....和框架兼容....
作者: szjazz    时间: 2015-5-5 21:07
本帖最后由 szjazz 于 2015-5-5 23:50 编辑

谢谢先，我正找此功能！调试了好久，没办法通过，没有实现该功能，能否请贴出该页面的全部（重点）源代码
我的网页代码如下：
界面代码：
  1. <f:TextArea runat="server" ID="txtSearchCondition" Height="120px" Text="abcdefghijklmn"></f:TextArea>
  2.                                         <f:TextArea ID="txtDesc" runat="server" Height="50px" Label="方案描述" Text=""></f:TextArea>
复制代码

头部的代码：
  1. <head runat="server">
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.     <script type="text/javascript" src="../res/js/jquery-1.7.1.js"></script>
  4.     <title></title>
  5. </head>
复制代码
在页面末尾代码
  1. <script type="text/javascript" defer="defer">
  2.         var nad = '<%=txtSearchCondition.ClientID%>';
  3. function onReady() {//添加事件

  5.     $('#' + nad).keydown(function (event) {
  6.         getCursorPosition(nad);
  7.     });
  8.     $('#' + nad).keyup(function (event) {
  9.         getCursorPosition(nad);
  10.     });
  11.     $('#' + nad).mousedown(function (event) {
  12.         getCursorPosition(nad);
  13.     });
  14.     $('#' + nad).mouseup(function (event) {
  15.         getCursorPosition(nad);
  16.     });
  17.     $('#' + nad).focus(function (event) {
  18.         getCursorPosition(nad);
  19.     });
  20. }
复制代码
还有为什么下面调试所显示的ID值（值=Panel1_Form2_FormRow3_Panel11_txtSearchCondition），与在页面中通过工具“审查元素”所看到的ID值（值=Panel1_Form2_FormRow3_Panel11_txtSearchCondition-inputEl）不同呢
  1. var nad = '<%=txtSearchCondition.ClientID%>';
  2. alert(nad);
复制代码

作者: glyuhan    时间: 2015-7-8 17:49
ER..我也没搞定 我是想通过点击按钮把内容插入光标处 ，var myField = F(msgClientID)可以正常拿到textarea但是这个 document.selection ，myField.selectionStart 都是未定义。。。后面就更没法玩了 是不是一点按钮，光标就没了？
var msgClientID = '<%= txmsgcontent.ClientID %>';
        function insertAtCursor(myValue) {

            var myField = F(msgClientID)
         
            //IE support
            if (document.selection) {
                myField.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                sel.select();
            }
                //MOZILLA/NETSCAPE support
            else if (myField.selectionStart || myField.selectionStart == '0') {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                // save scrollTop before insert
                var restoreTop = myField.scrollTop;
                myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
                if (restoreTop > 0) {
                    myField.scrollTop = restoreTop;
                }
                myField.focus();
                myField.selectionStart = startPos + myValue.length;
                myField.selectionEnd = startPos + myValue.length;
            } else {
                myField.value += myValue;
                myField.focus();
            }
        }



欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4