前端開(kāi)發(fā)之輸入框換行

端--輸入框換行，高度自適應(yīng)

最近項(xiàng)目遇到一個(gè)說(shuō)小不小說(shuō)大不大的問(wèn)題，輸入框要自動(dòng)換行，并且高度還得自適應(yīng)，我試了幾種方式，

1.input 輸入，input不能換行，上網(wǎng)查詢了說(shuō)將css設(shè)為word-break: break-all; word-wrap:break-word;也是無(wú)效的。

2.div 設(shè)置contenteditable="true"屬性，這種方法可以實(shí)現(xiàn)輸入內(nèi)容自動(dòng)換行，并且自適應(yīng)高度，但是項(xiàng)目需要光標(biāo)從邊輸入，我試過(guò)text-align：right是無(wú)效的。所以這種方式也不行。

3.textarea，文本輸入框，想想這個(gè)應(yīng)該可以了吧，文本輸入框是可以內(nèi)容自動(dòng)換行，可是高度怎么都是固定的啊。我還是沒(méi)解決。百度吧，終于找到解決辦法啦。

最后遇到一個(gè)光標(biāo)在placeholder提示文字上面，解決辦法：#textarea::-webkit-input-placeholder{ padding-right: 4px;}

<!DOCTYPE html>

<html>

<head>

<style>

#textarea {

display: block;

margin:0 auto;

overflow: hidden;

width: 550px;

font-size: 14px;

height: 18px;

line-height: 24px;

padding:2px;

text-align: right;

}

textarea {

outline: 0 none;

border-color: rgba(82, 168, 236, 0.8);

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

}

</style>

</head>

<body>

var autoTextarea = function (elem, extra, maxHeight) {

extra = extra || 0;

var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,

isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),

addEvent = function (type, callback) {

elem.addEventListener ?

elem.addEventListener(type, callback, false) :

elem.attachEvent('on' + type, callback);

getStyle = elem.currentStyle ? function (name) {

var val = elem.currentStyle[name];

if (name === 'height' && val.search(/px/i) !== 1) {

var rect = elem.getBoundingClientRect();

return rect.bottom - rect.top -

parseFloat(getStyle('paddingTop')) -

parseFloat(getStyle('paddingBottom')) + 'px';

};

return val;

} : function (name) {

return getComputedStyle(elem, null)[name];

minHeight = parseFloat(getStyle('height'));

elem.style.resize = 'none';

var change = function () {

var scrollTop, height,

padding = 0,

style = elem.style;

if (elem._length === elem.value.length) return;

elem._length = elem.value.length;

if (!isFirefox && !isOpera) {

padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

};

scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

elem.style.height = minHeight + 'px';

if (elem.scrollHeight > minHeight) {

if (maxHeight && elem.scrollHeight > maxHeight) {

height = maxHeight - padding;

style.overflowY = 'auto';

} else {

height = elem.scrollHeight - padding;

style.overflowY = 'hidden';

};

style.height = height + extra + 'px';

scrollTop += parseInt(style.height) - elem.currHeight;

document.body.scrollTop = scrollTop;

document.documentElement.scrollTop = scrollTop;

elem.currHeight = parseInt(style.height);

};

addEvent('propertychange', change);

addEvent('input', change);

addEvent('focus', change);

change();

};

</script>

var text = document.getElementById("textarea");

autoTextarea(text);// 調(diào)用

</script>

</body>

</html>

個(gè)完美的站長(zhǎng)網(wǎng)站里面沒(méi)有代碼高亮的插件怎么能行！小編在用SyntaxHighlighter插件的時(shí)候就遇到了一個(gè)非常腦熱的問(wèn)題，所以分享一下解決方法！

SyntaxHighlighter是一個(gè)使用JavaScript編寫(xiě)的功能齊全的代碼語(yǔ)法高亮的軟件。

問(wèn)題描述

SyntaxHighlighter是根據(jù)代碼中的換行符分配行號(hào)的。但是如果一行代碼或注釋太長(zhǎng)的話在頁(yè)面中顯示時(shí)需要分成多行顯示，這時(shí)行號(hào)就對(duì)不上了！就像下圖的情況

左側(cè)的行號(hào)和右側(cè)的內(nèi)容是不對(duì)齊的

解決方法

其實(shí)通過(guò)修改引用的CSS樣式使其強(qiáng)制不換行，但這種方法的話下方會(huì)出現(xiàn)橫向滾動(dòng)條，太不美觀了，權(quán)衡利弊，果斷拋棄。

我的原理是把行用each遍歷一下，計(jì)算出右側(cè)的行高，然后把得到的值賦給左側(cè)的行號(hào)列。

代碼如下：

<script>
$(window).load(function(){
$('.code .line').each(function(index) {
var yqhg = $(this).height();
$('.gutter .line:eq('+index+')').attr('style','height:'+yqhg+'px !important')
});
});
</script>

插入到頁(yè)面底部（SyntaxHighlighter.all()方法后面也行），本方法是基于JQuery寫(xiě)的，大家用這種方法之前請(qǐng)務(wù)必引入JQuery文件！

如果本文對(duì)你有用的話請(qǐng)不要忘記分享關(guān)注哦！謝謝觀看！

級(jí)標(biāo)簽

一個(gè)頁(yè)面的布局就像一張報(bào)紙需要排版，需要分為多個(gè)區(qū)塊。塊內(nèi)為多行逐一排列的文字、圖片、超鏈接等內(nèi)容，這些區(qū)塊一般稱之為塊級(jí)標(biāo)簽；而文字、圖片、超鏈接等稱之為行級(jí)標(biāo)簽。

塊級(jí)標(biāo)簽顯示的外觀按“塊”來(lái)顯示，具有一定的高度和寬度，如：<div>、<p>等；

行級(jí)標(biāo)簽顯示的外觀按“行”來(lái)顯示，類似于文本的顯示，如：<img>、<a>等。

1.基本的塊級(jí)標(biāo)簽

1.1.標(biāo)題標(biāo)簽<h1>~<h6>

標(biāo)題標(biāo)簽表示一段文字的標(biāo)題（主題），并且支持多層次的內(nèi)容結(jié)構(gòu)，一級(jí)標(biāo)簽使用<h1>，二級(jí)標(biāo)簽使用<h2>，以此類推。html提供六級(jí)，<h1>最大，<h6>最小代碼及顯示效果如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>標(biāo)題標(biāo)簽對(duì)比</title>
	</head>	
	<body>
		<h1>一級(jí)標(biāo)簽</h1>
		<h2>二級(jí)標(biāo)簽</h2>
		<h3>三級(jí)標(biāo)簽</h3>
		<h4>四級(jí)標(biāo)簽</h4>
		<h5>五級(jí)標(biāo)簽</h5>
		<h6>六級(jí)標(biāo)簽</h6>
	</body>
</html>

標(biāo)題標(biāo)簽代碼預(yù)覽

1.2.段落標(biāo)簽<p>

段落標(biāo)簽是表示一段文字內(nèi)容的，一個(gè)段落可以包含多行文字，文字內(nèi)容將隨瀏覽器窗口的大小自動(dòng)換行。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標(biāo)簽</title>
	</head>	
	<body>
		<h1>標(biāo)題</h1>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

段落標(biāo)簽代碼預(yù)覽

1.3.水平線標(biāo)簽<hr/>

水平線標(biāo)簽顯示一條水平線，這個(gè)標(biāo)簽比較特殊沒(méi)有結(jié)束標(biāo)簽，直接是用來(lái)<hr/>表示標(biāo)簽的開(kāi)始和結(jié)束。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標(biāo)簽</title>
	</head>	
	<body>
		<h1>標(biāo)題</h1>
    <hr/>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

水平線標(biāo)簽代碼預(yù)覽

2.常用于布局的塊級(jí)標(biāo)簽

2.1.有序列表標(biāo)簽<ol>

使用<ol>,</ol>(有序列表)，<li></li>(列表項(xiàng))HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>有序列表</title>
	</head>	
	<body>
		<ol>
			<li>第一條數(shù)據(jù)</li>
			<li>第二條數(shù)據(jù)</li>
			<li>第三條數(shù)據(jù)</li>
		</ol>
	</body>
</html>

有序列表代碼預(yù)覽

2.2.無(wú)序列表標(biāo)簽<ul>

使用<ul>,</ul>(無(wú)序列表)，<li></li>(列表項(xiàng))HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>無(wú)序列表</title>
	</head>	
	<body>
		<ul>
			<li>第一條數(shù)據(jù)</li>
			<li>第二條數(shù)據(jù)</li>
			<li>第三條數(shù)據(jù)</li>
		</ul>
	</body>
</html>

無(wú)序列表代碼預(yù)覽

2.3.定義列標(biāo)簽<dl>

使用<dl>（定義列表）<dt> （定義列表中的項(xiàng)目）和 <dd> （列表中項(xiàng)目的描述）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>dl-dt-dd的使用</title>
	</head>	
	<body>
		<dl>
			<dt>項(xiàng)目名稱</dt>
			<dd>項(xiàng)目描述的第一行</dd>
			<dd>項(xiàng)目描述的第二行</dd>
		</dl>
	</body>
</html>

定義列標(biāo)簽<dl>代碼預(yù)覽

2.4.表格標(biāo)簽<teble>

使用<teble>，</teble>（表格），<tr>，</tr>（行），<td>，</td>（列）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>table標(biāo)簽的使用</title>
	</head>	
	<body>
		<table width="200" border="1">
			<tr>
				<td>姓名</td>
				<td>年齡</td>
			</tr>
			<tr>
				<td>張三</td>
				<td>20</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>22</td>
			</tr>
		</table>
	</body>
</html>

表格標(biāo)簽代碼預(yù)覽

2.5.表單標(biāo)簽<form>

使用<form>,</form>（表單），<input/>（內(nèi)容）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
		<title>form的使用</title>
	</head>
	<body>
		<form action="" method="post">
			<p>
				用戶名：
				<input name="username" type="text" size="20" />
			</p>
			<p>
				密   碼：
				<input name="password" type="password" size="20" />
			</p>
			<input name="submit" type="button" value="登錄" />
		</form>
	</body>
</html>

form標(biāo)簽代碼預(yù)覽

2.6.分區(qū)標(biāo)簽<diy>

<diy>標(biāo)簽相當(dāng)于一個(gè)大容器，可以容納無(wú)序、有序列表，表格等標(biāo)簽，也可以容納圖片、文字、標(biāo)題、段落等內(nèi)容HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>div的使用</title>
	</head>	
	<body>
		<div style="width: 500; height: 300; background-color: aquamarine;">
			<p>段落標(biāo)簽</p>
			<h1>標(biāo)題標(biāo)簽</h1>
			<ul>
				<li>無(wú)序列表標(biāo)簽第一行</li>
				<li>無(wú)序列表標(biāo)簽第二行</li>
			</ul>
			文字可以直接輸入在這里
		</div>
	</body>
</html>

div標(biāo)簽代碼預(yù)覽

在線咨詢

上一篇：前端系列教程-JavaScript在網(wǎng)頁(yè)動(dòng)畫(huà)中的使用
下一篇：HTML5游戲怎么做？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。