Web►Front-End

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

前言

HTML5有contenteditable屬性，可以達到類似textarea的效果。

差異

原理大致上和textarea差不多，但如果換行會產生新的子區塊而不是產生換行字元，因此必須使用keydown將動作替換成插入<br>，但若只插入一個<br>在文字的最後無法換行，等待之後尋求更好的解法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
text.onkeydown = function(e){
	if ( e.keyCode === 13) {
		document.execCommand('insertHTML', false, '<br><br>');
    }
}
var getTextMaxLength = function(text,font,size){
	var s = "" ;
	var t = (text.innerHTML).replace("&nbsp;",' ') ;
	var max = 0 ;
	var row = 0 ;
	for ( var i = 0 ; t.indexOf("<br>") !== -1 ; i ++ , row = i ){
		max = Math.max(max,getTextWidth(t.substring(0,t.indexOf("<br>")-1),font,size)) ;
		t = t.substring(t.indexOf("<br>")+4,t.length) ;
	}
	if ( t !== "" ){
		max = Math.max(max,getTextWidth(t,font,size)) ;
		row ++ ;
	}
	return {row:row,length:max} ;
}

GitHub

GitHub