js 如何获取光标的坐标（是在文体框中的坐标而非鼠标的光标）

jiangpan 2009-04-02 04:40:45

我主要想实现在网页的文体框中录入文字时有光标的位置上显示一个DIV的提示信息。效果就如同输入法一样。

...全文

672 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

王集鹄 2009-04-02

打赏
举报

from
http://weblogs.asp.net/skillet/archive/2005/03/24/395838.aspx

<html>



<head>



    <script language="JavaScript" type="text/javascript">



    <!--



        function initPosition(textBox) {



            var storedValue = textBox.value;



            textBox.value = "";



            textBox.select();



 



            var caretPos = document.selection.createRange();



            textBox.__boundingTop = caretPos.boundingTop;



            textBox.__boundingLeft = caretPos.boundingLeft;



                     



            textBox.value = " ";



            textBox.select();



 



            caretPos = document.selection.createRange();



            textBox.__boundingWidth = caretPos.boundingWidth;



            textBox.__boundingHeight = caretPos.boundingHeight;



 



            textBox.value = storedValue;



        }



 



        function storePosition(textBox) {



            var caretPos = document.selection.createRange();



 



            var boundingTop = (caretPos.offsetTop + textBox.scrollTop) - textBox.__boundingTop;



            var boundingLeft = (caretPos.offsetLeft + textBox.scrollLeft) - textBox.__boundingLeft;



 



            textBox.__Line = (boundingTop / textBox.__boundingHeight) + 1;



            textBox.__Column = (boundingLeft / textBox.__boundingWidth) + 1;



        } 



 



        function updatePosition(textBox) {



            storePosition(textBox);



            document.forms[0].txtLine.value = textBox.__Line;



            document.forms[0].txtColumn.value = textBox.__Column;



        }



    //-->



    </script>



    <style type="text/css">



        body, td, tg, input, select {



            font-family: Verdana;



            font-size: 10px;



        }



    </style>



</head>



<body onload="initPosition(document.forms[0].txtLayoutViewer)">



    <form>



        <table cellspacing="0" cellpadding="3">



            <tr>



                <td colspan="3">



                    Change Font Size



                    <select onchange="this.form.txtLayoutViewer.style.fontSize = this.options[this.selectedIndex].value; initPosition(this.form.txtLayoutViewer);">



                        <option value="10">10px</option>



                        <option value="12">12px</option>



                        <option value="14">14px</option>



                        <option value="16">16px</option>



                        <option value="18">18px</option>



                        <option value="20">20px</option>



                        <option value="24">24px</option>



                        <option value="36">36px</option>



                    </select>



                </td>



            </tr>



            <tr>



                <td colspan="3">



                    <textarea name="txtLayoutViewer"



                        onmouseup="updatePosition(this)"



                        onmousedown="updatePosition(this)"



                        onkeyup="updatePosition(this)"



                        onkeydown="updatePosition(this)"



                        onfocus="updatePosition(this)"



                        rows="15"



                        cols="75">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare aliquam quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque et quam in dui consequat tempor. Etiam lorem lectus, sollicitudin laoreet, tincidunt nec, pharetra in, magna. Mauris accumsan velit et augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</textarea></td>



            </tr>



            <tr>



                <td width="70%">



                     </td>



                <td width="10%">



                    Line <input type="text" name="txtLine" style="width: 25px" readonly></td>



                <td width="20%">



                    Column <input type="text" name="txtColumn" style="width: 25px" readonly></td>



            </tr>



        </table>



    </form>



</body>



</html>