1分钟实现多行文本框[textarea]自动高度jquery 插件

<div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label>
    <div class="col-sm-9">
        <textarea class="col-sm-8" id="form-field-5" placeholder="请输入内容..."></textarea>
    </div>
</div>
$.extend({
	textareaAutosize_dc:function(){
		$("textarea").on("keyup",function(e){
				var currentEnterCount=$(this).val().split("\n").length;
				var lineHeight=Number($(this).css("line-height").replace("px",""));
				$(this).height( lineHeight*(currentEnterCount+1));
		});
	}
}).fn.extend({
	textareaAutosize_dc:function(){
		$(this).on("keyup",function(e){
				var currentEnterCount=$(this).val().split("\n").length;
				var lineHeight=Number($(this).css("line-height").replace("px",""));
				$(this).height( lineHeight*(currentEnterCount+1));
		});
	}
});
//调用自动高度
//$.textareaAutosize_dc();//设置所有textarea 高度自动
$("textarea").textareaAutosize_dc();//指定特定的textarea 高度自动

原理:其实就是 文本框高度=行高*(换行数+1)

时间: 2024-12-07 17:54:50

1分钟实现多行文本框[textarea]自动高度jquery 插件的相关文章

编写实现多行文本框[textarea]自动高度jquery 插件

<div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-5"> 内容</label> <div class="col-sm-9"> <textarea class="col-sm-8" id="form-fie

php 批量添加 多行文本框 textarea

$act=!empty($_GET['act']) ? trim($_GET['act']) : ''; switch($act) { case 'adda': $area['a_value'] = trim($_POST['a_value']); $area['a_type']=3; if(strpos($area['a_value'], "\n") === false) { //echo $area['a_value']; //add($area); //$DB->inser

jquery文本框textarea自适应高度

浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id="textarea3" style="overflow-y:hidden; height:20px;resize: none"> </textarea> <script type="text/javascript" src="

让文本框textarea自动适应内容的高度

方法一: <textarea rows=1 cols=40 style='overflow:scroll;overflow-y:hidden;;overflow-x:hidden' onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval

IE下支持文本框和密码框placeholder效果的JQuery插件

基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失. 实现代码如下: (function($) {  /**   * 没有开花的树   * 2012/11/28 15:12   */ var placeholderfriend = {    focus: function(s) {      s =

CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求. 最近项目中要求把得到的后端json数据如下图展示给客户,还需要可编辑的功能,于是就用到了CodeMirror这款插件,经过初步的探索,发现它主题样式非常靓丽,简单美观,效果图如下: 下面我就一步一步说明我的使用过程. 1.首先需要下载codemirror插件,先创建文件夹,下载插件 np

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效(css)

给 input 文本框和 textarea 多行文本框添加发光焦点响应特效css3 transition 属性是一个简写属性,用于设置四个过渡属性 CSS 属性的名称 all完成过渡效果需要多少秒或毫秒 0.30s速度效果的速度曲线 :ease-in-out定义过渡效果何时开始: css3 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; 0 0 5px rgba(81, 203, 2

多行文本框的高度变化

<!DOCTYPE html><meta charset="utf-8"><html><head> <title>多行文本框的高度变化</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"&g

保留多行文本框的换行与空格样式,并转义HTML标记的尖括号

本文采用JavaScript进行演示,这并不影响你在项目中的实际应用,因为我提供的思路,你可以轻易地把它用你自己的语言进行实现,这通常是后台语言,而且下面提供的正则表达式你几乎可以完全照搬,因为正则表达式是通用的. 作者:WebFlash出处:http://webflash.cnblogs.com 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 一.需求来源 假如在你的一个网站项目中,你需要提供一个留言入口,你