1. 程式人生 > >js獲取TextArea每一行字串(包括自動換行符)的解決方案

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

$.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變數中
			}
				
		}
	}
});
3 獲取到result,其即為包含手工以及自動換行符的資料,換行符均被轉為#

相關推薦

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字串的空格位置 查詢空

jstextarea輸入框內容自動新增

<!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