网站首页/技术开发列表/内容

如何运用JS代码选取textarea中的指定行

技术开发2023-06-22阅读
编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

选取textarea中的指定行

【实例描述】

使用控件的focus或select方法,可以很方便地选取textarea的所有内容,但却无法实现某行的选取。本例讲解如何选取textarea中的指定行。

【实例代码】

   <function getTxtRow(num, mytxt)   //获取指定行的方法-第二个参数为文本框ID {                                  //获取文本框内当前光标的位置     var range = document.getElementById(mytxt).createTextRange();     var rect = range.getClientRects();//返回一个矩形     var left = rect[0].left;     if(num > rect.length - 1 || num < 0)         return;     if(num == 0)               //选择第一行的情况     {       //设置选择范围        var right = rect[0].right;        range.moveEnd("character",-range.text.length);          while(range.offsetLeft + range.boundingWidth < right)        {            range.expand("character");        }        return range;     }     else     {        //设置选择范围         var right = rect[num].right;         var range = getTxtRow(num - 1, mytxt);         range.moveStart("character",range.text.length + 1);         while((range.offsetLeft + range.boundingWidth) < right)         {             range.expand("character");         }         if(range.offsetLeft > left)             range.moveStart("character",-1);         return range;     } } //选择指定行数的方法 function getText(num) {     var range = getTxtRow(num,"txt")//调用真正的获取行方法     if(range != null)                //如果指定的行内容不为空     {         alert(range.text);         range.select();              //选择指定的行     } } </SCRIPT>

【运行效果】

运行效果

【难点剖析】

 本例的难点在于光标的获取,以及文本的选择范围。使用“createTextRange”方法获取文本中光标的位置。使用“getclientRects”选择一个范围,然后设置范围的起始位置和结束位置。最后使用“select”方法选择整行内容。

【源码下载】

本实例JS代码下载


使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。

……

相关阅读