js獲取TextArea每一行字串(包括自動換行符)的解決方案
當TextArea開啟自動換行時,通過同步提交可以在後臺獲取到自動換行符,但是如果通過js讀取進行非同步提交時,卻無法獲取到自動換行符。這裡先給出兩種半吊子解決方案:
1 利用IE的createTextRange可以通過移動擴充套件游標直到內容超出TextArea寬度時結束,該方法不支援跨瀏覽器,而且在混合有手工換行時容易出錯
2 計算字元寬度,製作一張中英文以及各個特殊字元的畫素寬度表,然後計算出是否超出TextArea寬度,該方法太過於複雜,個人沒有實現。
本文給出在實際應用中實現如何完美獲取TextArea的每一行資料,包括自動換行以及手動換行符,主要原理為向一個隱藏域一一追加字元,直到其寬度大於TextArea寬度為止。
<textarea id="testContentTextArea" wrap="virtual" style="width:400px;word-wrap: break-word;word-break: break-all;"/>
1:建立一個隱藏域作為寬度檢測,如span、div等。這裡以span為例:
<span id="testSpanForCheck" style=visibility:hidden"">
需要注意,隱藏域的屬性需要與textarea一致,並且隱藏域的寬度能夠擴充套件到textarea一樣寬
2 獲取textarea內容,並通過js處理,將內容分割為按行顯示,換行符用#表示,示例以jquery方式讀取為例。
第一步:讀取內容,並按照手工換行符分隔為字串陣列
var content = $("#testContentTextArea").val().split("\n");
var result="";
var contentWidth = $("#testContentTextArea").width();
$("#testSpanForCheck").text("");
第二步:檢測每一字串內容是否超過textarea寬度,超過則追加換行。需要注意的是,innerText方法會將多個空格合併為一個,所以在追加時需要將空格轉為普通字元,如a
3 獲取到result,其即為包含手工以及自動換行符的資料,換行符均被轉為#$.each(content, function(i, val){ var valLength = val.length; if(valLength == 0) { result += "#"; } else { var pre = "", innerVal, tempWidth; for(var innerI = 0; innerI < valLength; innerI++) { innerVal = val.charAt(innerI); if(innerVal == " ") { $("#testSpanForCheck").text($("#testSpanForCheck").text() + "a"); //追加字元,如果為空格則追加為a(innerText方法會將多個空格合併為一個,所以需要轉換) } else { $("#tempContent").text($("#tempContent").text() + innerVal); //非空格則直接追加 } tempWidth = $("#testSpanForCheck").width(); //獲取新增字元後隱藏域的寬度 if(tempWidth > contentWidth) { result += pre;//如果追加字元後隱藏域寬度大於TextArea寬度,則表明該字元為下一行字元, result += "#"; $("#testSpanForCheck").text(innerVal); pre = innerVal; } else if(innerI == valLength - 1) { result += pre + innerVal;//最後一個字元 result += "#"; $("#testSpanForCheck").text(""); pre = ""; } else { pre += innerVal;//依次追加到pre變數中 } } } });
相關推薦
js獲取TextArea每一行字串(包括自動換行符)的解決方案
當TextArea開啟自動換行時,通過同步提交可以在後臺獲取到自動換行符,但是如果通過js讀取進行非同步提交時,卻無法獲取到自動換行符。這裡先給出兩種半吊子解決方案: 1 利用IE的createTextRange可以通過移動擴充套件游標直到內容超出TextArea寬度時結束,該方法不支援跨瀏覽
Git自動換行符
rri 關閉 his 工具 size 打開 printf 目前 輸出 http://blog.csdn.net/jonathan321/article/details/51988242?locationNum=2 不同的操作系統有不同的換行符格式,跨平臺協作時需要考慮
Java 去掉字串中的換行符回車符等
去掉一個字串中的換行符、回車符等,將連續多個空格替換成一個空格 String string = "this just a test" Pattern p = Pattern.compile("
(十四)Java工具類StringUtils剔除字串末回車換行符(\r\n)chomp、chop詳解
public static String chomp(String str) { if (isEmpty(str)) { return str; }
div中英文無法自動換行的解決辦法
在一個設定好寬度的div中,當我們輸入的中文文字長度超過了設定寬度時,會自動換到下一行。 但是,如果輸入的是英文字母,那麼,無論你div設定寬度為多少,英文字母都是不換行直接在同一行輸出,導致div的寬度遠遠超出設定的大小。 原因:這是因為div中,英文字母之間沒有空格
Python字串中的換行符和製表符
有關換行的問題 首先提一個問題,如下。 有python程式程式碼: print("I'm Bob. What's your name?") 上一行程式碼的輸出如下: I'm Bob. What's your name? 上面的輸出沒
處理json格式的字串中的換行符、回車符
- (NSString *)deleteSpecialCodeWithStr:(NSString *)str {NSString *string = [str stringByReplacingOccurrencesOfString:@"\r"withString:@""];
DEVEXPRESS Gridview單元格字串中有換行符的處理方法
DEVEXPRESS版本:15.2.4 當列單元格中有換行符時,預設情況下只能顯示第一行的字串,解決方案如下: 1.將要換行的列的ColumnEdit屬性設定成MemoEdit(要增加後設置) 2.將AppearanceCell->TextOptions->
(轉)iOS 字串去掉空格換行符
NSString *str = @" xxxx "; // 1. 去掉首尾空格和換行符 str = [str stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineChara
Java統計一個文字檔案中每一行字串出現的次數
需求:現要統計一個文字檔案中每一行字串出現次數 public static HashMap<String, Integer> analysizeFile(File file) { Ha
去掉txt檔案中每一行字串內容的第一個空格
demo的作用 在opencv訓練分類器的時候,前期製作樣本的時候,師弟們把樣本的名字中帶有了空格,但是訓練的時候樣本的名字是不能帶有空格的。而樣本的名字儲存在一個txt資料夾中,所以需要修改txt檔案中的樣本名字。 讀寫檔案 find字串的空格位置 查詢空
js 給textarea輸入框內容自動新增換行符
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;
css模仿記事本輸入完成一行自動換行
如圖效果 做專案遇到的一個坑,需要最某一個東西就行標註, 需要如上圖一樣的效果,初始化一個高度的盒子,當點選的 時候輸入完成一行的時候,自動切換到下一行,當到達最後一行的 時候,自動增加高度,,一開始覺得用input一排一排的來 佈局,輸入滿一行自動切換焦點,後來試試下,還是存在各種
微信小程式實現View子節點每行固定顯示數目,多出來自動換行
需求是這樣的: 需要根據後臺傳入的資料動態生成view控制元件,固定每行展示三個,多出來的自動換行。 如果用js來寫想必比較簡單,由於接觸微信小程式時間不算太長,對於前端的一些寫法難免運用不是很熟練。 這是我的目錄結構: 相關的思路我已經在程
解決textarea不會自動換行的問題
用html的textarea標籤編輯錄入資料或文字的時候,按enter鍵換行錄入儲存,但是當重新從伺服器讀取資料的時候發現不會換行了,Google之後終於發現了原因並和解決方法 原因: 當在前端錄入資料的時候,按enter換行其實該換行符是“\n”,那麼在進行讀寫的時候都是
關於ul下內插入內容標籤自動換行不在同一行問題
前提,li span {float:right;} 如果這麼寫 <li>美纖網<span>2013.05.23</span></li> 這個日期就會竄到下一行去 而如果這樣 <li><span>2013.05.23</span>
js或Jquery中判斷字串中是否有換行符或回車符/n
1、判斷是否有/n字元,不是回車符,是否把/n替換成空字元 if (aaa.indexOf("\\n") >= 0) { alert(aaa + " 中有\n");
div 標籤裡的內容或字串自動換行
一、 <div style="width:300px; height:auto; float:left;"> lsdkjflksdjflsdjf裡的房價是離開的解放路口lksjdlfdsdsdsdsdssdsdsdsdfjsdlkfjlsdjflskdf <
Jquery實現textarea自動換行
今天做一個線上聊天小程式的時候,利用jquery把文字框中的內容放入文字域,發現嵌入Html程式碼<br/>沒有反應,這是去網上查查沒 找到答案,不過看到了這樣一句話: jQuery的text()和val()都可以取到值。TextArea裡面的原始換行是"\n\
js textarea裡面的換行符\n,替換成包裹
<textarea id =“article_content”rows =“10”cols =“100”placeholder =“請輸入文章內容”value =“”> </ textarea> <br/> const art