前端开发之输入框换行

端--输入框换行，高度自适应

最近项目遇到一个说小不小说大不大的问题，输入框要自动换行，并且高度还得自适应，我试了几种方式，

1.input 输入，input不能换行，上网查询了说将css设为word-break: break-all; word-wrap:break-word;也是无效的。

2.div 设置contenteditable="true"属性，这种方法可以实现输入内容自动换行，并且自适应高度，但是项目需要光标从边输入，我试过text-align：right是无效的。所以这种方式也不行。

3.textarea，文本输入框，想想这个应该可以了吧，文本输入框是可以内容自动换行，可是高度怎么都是固定的啊。我还是没解决。百度吧，终于找到解决办法啦。

最后遇到一个光标在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);// 调用

</script>

</body>

</html>

个完美的站长网站里面没有代码高亮的插件怎么能行！小编在用SyntaxHighlighter插件的时候就遇到了一个非常脑热的问题，所以分享一下解决方法！

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件。

问题描述

SyntaxHighlighter是根据代码中的换行符分配行号的。但是如果一行代码或注释太长的话在页面中显示时需要分成多行显示，这时行号就对不上了！就像下图的情况

左侧的行号和右侧的内容是不对齐的

解决方法

其实通过修改引用的CSS样式使其强制不换行，但这种方法的话下方会出现横向滚动条，太不美观了，权衡利弊，果断抛弃。

我的原理是把行用each遍历一下，计算出右侧的行高，然后把得到的值赋给左侧的行号列。

代码如下：

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

插入到页面底部（SyntaxHighlighter.all()方法后面也行），本方法是基于JQuery写的，大家用这种方法之前请务必引入JQuery文件！

如果本文对你有用的话请不要忘记分享关注哦！谢谢观看！

级标签

一个页面的布局就像一张报纸需要排版，需要分为多个区块。块内为多行逐一排列的文字、图片、超链接等内容，这些区块一般称之为块级标签；而文字、图片、超链接等称之为行级标签。

块级标签显示的外观按“块”来显示，具有一定的高度和宽度，如：<div>、<p>等；

行级标签显示的外观按“行”来显示，类似于文本的显示，如：<img>、<a>等。

1.基本的块级标签

1.1.标题标签<h1>~<h6>

标题标签表示一段文字的标题（主题），并且支持多层次的内容结构，一级标签使用<h1>，二级标签使用<h2>，以此类推。html提供六级，<h1>最大，<h6>最小代码及显示效果如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>标题标签对比</title>
	</head>	
	<body>
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
	</body>
</html>

标题标签代码预览

1.2.段落标签<p>

段落标签是表示一段文字内容的，一个段落可以包含多行文字，文字内容将随浏览器窗口的大小自动换行。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落标签</title>
	</head>	
	<body>
		<h1>标题</h1>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

段落标签代码预览

1.3.水平线标签<hr/>

水平线标签显示一条水平线，这个标签比较特殊没有结束标签，直接是用来<hr/>表示标签的开始和结束。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落标签</title>
	</head>	
	<body>
		<h1>标题</h1>
    <hr/>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

水平线标签代码预览

2.常用于布局的块级标签

2.1.有序列表标签<ol>

使用<ol>,</ol>(有序列表)，<li></li>(列表项)HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>有序列表</title>
	</head>	
	<body>
		<ol>
			<li>第一条数据</li>
			<li>第二条数据</li>
			<li>第三条数据</li>
		</ol>
	</body>
</html>

有序列表代码预览

2.2.无序列表标签<ul>

使用<ul>,</ul>(无序列表)，<li></li>(列表项)HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>无序列表</title>
	</head>	
	<body>
		<ul>
			<li>第一条数据</li>
			<li>第二条数据</li>
			<li>第三条数据</li>
		</ul>
	</body>
</html>

无序列表代码预览

2.3.定义列标签<dl>

使用<dl>（定义列表）<dt> （定义列表中的项目）和 <dd> （列表中项目的描述）HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>dl-dt-dd的使用</title>
	</head>	
	<body>
		<dl>
			<dt>项目名称</dt>
			<dd>项目描述的第一行</dd>
			<dd>项目描述的第二行</dd>
		</dl>
	</body>
</html>

定义列标签<dl>代码预览

2.4.表格标签<teble>

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

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>table标签的使用</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>

表格标签代码预览

2.5.表单标签<form>

使用<form>,</form>（表单），<input/>（内容）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标签代码预览

2.6.分区标签<diy>

<diy>标签相当于一个大容器，可以容纳无序、有序列表，表格等标签，也可以容纳图片、文字、标题、段落等内容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>段落标签</p>
			<h1>标题标签</h1>
			<ul>
				<li>无序列表标签第一行</li>
				<li>无序列表标签第二行</li>
			</ul>
			文字可以直接输入在这里
		</div>
	</body>
</html>

div标签代码预览

在线咨询

上一篇：前端系列教程-JavaScript在网页动画中的使用
下一篇：HTML5游戏怎么做？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端开发之输入框换行

端--输入框换行，高度自适应

问题描述

解决方法

级标签

您的项目需求