Web►Front-End

[Front-End] 自動調整Textarea邊界

前言

延續上次的文章，取得文字高度和寬度後就可以動態調整邊界。

取得字體資訊

若沒有在CSS中設定，可以透過getComputedStyle取得。

1
2
var style = window.getComputedStyle( text, null ).getPropertyValue( 'font-family' );
var size = window.getComputedStyle(text, null).getPropertyValue('font-size');

取得字體高度及寬度

一樣透過在網頁新增物件量測。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var getTextWidth = function(text,font,size){
	var span = document.createElement('span');
	span.style['fontFamily'] = font ;
	span.style['fontSize'] = size ;
	span.innerHTML = "W" + text  + "W";
	document.body.appendChild(span);
	var width = 0 ;
	try {
		width = span.offsetWidth ;
	} finally {
		span.remove();
	}
	return width;
}
var getTextHeight = function(font,size) {
	var text = document.createElement('span');
	text.style['fontFamily'] = font ;
	text.style['fontSize'] = size ;
	text.innerHTML = "Hg";
	var block = document.createElement('div') ;
	block.style.display ="inline-block";
	block.style.width = "1px" ;
	block.style.height = "0px" ; 
	var div = document.createElement('div');
	div.appendChild(text);
	div.appendChild(block)
	document.body.appendChild(div);
	var height = 0 ;
	try {
		block.style.verticalAlign = "bottom" ;
		height = block.offsetTop - text.offsetTop;
	} finally {
		div.remove();
	}
	return height;
}

取得行數及最大寬度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var getTextMaxLength = function(text,font,size){
	var s = "" ;
	var t = text.value ;
	var max = 0 ;
	var row = 0 ;
	for ( var i = 0 ; i < t.length ; i ++ ){
		if ( t[i] === "\n" || i === t.length - 1 ){
			max = Math.max(max,getTextWidth(s,font,size)) ;
			s = "" ;
			row ++ ;
			if ( (t[i] === "\n" || t[i] === "\r" || t[i] === "\r\n"  ) && i === t.length - 1 ){
				row++ ;
			}
		} else {
			s += t[i] ;
		}
	}
	return {row:row,length:max} ;
}

Event

若使用onchange會點擊其他元素的時候才會觸發，單獨使用keydown會造成最後按下的字母不會在value裡，而單獨使用keyup會造成長按只紀錄一個，因此同時使用keydown和keyup。

1
2
3
4
5
6
7
8
9
10
text.onkeydown = function(){
	var result = getTextMaxLength(text,getFontFamily(this),getFontSize(this)) ;
	this.style.width = result.length  + 3 ;
	this.style.height = getTextHeight(getFontFamily(this),getFontSize(this)) * result.row + 10;
}
text.onkeyup = function(){
	var result = getTextMaxLength(text,getFontFamily(this),getFontSize(this)) ;
	this.style.width = result.length  + 3 ;
	this.style.height = getTextHeight(getFontFamily(this),getFontSize(this)) * result.row + 10;
}

GitHub

GitHub