當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

如何運用JS代碼分行取textarea中的值

如何運用JS代碼分行取textarea中的值

更新時間:2023-06-22 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

分行取textarea中的值

【實例描述】

 在文本域內選擇文本叫,可以一行一行地選擇,同時這個選擇是自動的。本例學習如何實現這種效果。

【實例代碼】

<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <SCRIPT language="javascript"> function getRange(num, areaId)      //行號,文本區域的ID {     var txtRange = document.all(areaId).createTextRange(); //獲取鼠標     var rect = txtRange.getClientRects();                  //選擇范圍     var left = rect[0].left;                            //左側位置     if(num > rect.length - 1)                           //超出行范圍         return;     if(num == 0)                                        //如果是第一行     {        var right = rect[0].right;        txtRange.moveEnd("character",-txtRange.text.length); //移動到結尾        while(txtRange.offsetLeft + txtRange.boundingWidth < right) //沒有到結尾        {            txtRange.expand("character");      //擴展寬度到結尾        }        return txtRange;             //返回選擇區域     }     else     {         var right = rect[num].right;                 //右側范圍         var txtRange = getRange(num - 1, areaId);         //獲取選擇域         txtRange.moveStart("character",txtRange.text.length + 1); //移動到開始位置         while(txtRange.offsetLeft + txtRange.boundingWidth < right) //如果沒有到結尾         {             txtRange.expand("character");        //擴展到結尾         }     if(txtRange.offsetLeft > left)             txtRange.moveStart("character",-1);       //開始位置前         return txtRange;     } } function getText(num)               //根據行號,返回選擇 {     var txtRange = getRange(num,"mytxt")     if(txtRange != null)     {         txtRange.select();             //如果不為空,則選擇     } } </SCRIPT> </HEAD> <BODY> <TEXTAREA cols="40" rows="10" id="mytxt"> 第一行 第二行 第三行 </TEXTAREA><p> <input type="button" onClick="getText(0)" value="選第一行"> <input type="button" onClick="getText(1)" value="選第二行"> <input type="button" onClick="getText(2)" value="選第三行"> </BODY> </HTML>

【運行效果】

運行效果

【難點剖析】

本例的重點是如何實現選擇一段文本!癱reateTextRange”用來創建選擇范圍,“moveStart”、“moveEnd”、“expand”方法實現復雜選區,這些方法都接收兩個參數:移動的單位和移動單位的個數。其中移動單位是同定值:“character”,“word”,“sentencce”或“textedit”。

【源碼下載】

本實例JS代碼下載


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品