热门关键词： |
当前位置： >
div模拟textarea文本域现高度自适应
浏览：次 来源：未知
日期： 09:00:06 评论：
一、关于textarea文本域以及高度自适应
textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如腾讯微博的输入框：
作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。所以，有时候，为了增加交互体验想让文本域高度自适应的时候，就会遇到麻烦。并不是不能实现，例如Google的Buzz的输入框就是高度自适应里面的内容的，如下截图：
不说远的，我个人网站的提问与交流页面中的回答输入框（需登录）：
当输入一些文字后，文本域的高度自动随内容多少撑高了：
然而，这些文本域的高度自适应都是通过JavaScript脚本实现的。拿我个人站点上的高度自适应文本框来说，要克隆一个隐藏的textarea，通过实时的文字赋值，检测是否产生滚动条来确定显示文本域的高度是否动态增加。对于JavaScript不熟悉的人来讲，这种方法的实现比想办法跟校花约会还麻烦。
然而，实际上，如果你要求不是很高，是个非常简便，且老少皆宜的实现方法的。这种方法就是使用普通的div标签模拟textarea文本域，同时又利用了div标签的高度自适应性。于是，textarea文本域的高度自适应效果就可以轻松实现。
二、div模拟textarea文本域及高度自适应
我之前翻译过一篇文章，名为&&，其中在&六、内容可编辑&部分介绍了一个标签属性，为contenteditable，顾名思意，就是允许用户编辑元素内容包含的任意文本，包括子元素。
应用了此属性后，普通的div标签也会像文本域一样可以获得焦点，同时有一个光标在那里闪啊闪，闪啊闪，你越看她她越闪。 的聊天对话框的输入框就是应用了此属性。
//zxx:企鹅的圣诞主题界面很nice，视觉效果很赞，下雪的效果也很有爱，连cup也为之奔腾。
使用很简单，一个普通的block元素上加个contenteditable=&true&就ok了，如下：
&div contenteditable=&true&&&/div&
true外面的引号甚至去掉都没关系。
contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。
ok，最麻烦的模拟textarea的可编辑效果已经解决了，现在想要使用div实现高度自适应那就像是给花花草草松松土一样容易的。使用min-height属性基本上就一步到位了，考虑到IE6浏览器对min/max家族不屑一顾，结合其内部元素溢出会撑开父标签高宽的特性，IE6浏览器直接定高就可以了。于是，假设我们要实现默认200像素高度，高度可随内容自适应的效果，直接下面两个样式就可以了：
{ min-height: 200 _height: 200 }
于是，把说到现在的内容结合一起，就可以使用div模拟textarea文本域轻松实现高度自适应了。
如下测试代码&&
.test_box {
width: 400
min-height: 120
max-height: 300
_height: 120
margin-left:
margin-right:
padding: 3
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12
word-wrap: break-
overflow-x:
overflow-y:
_overflow-y:
HTML代码：
&div class=&test_box& contenteditable=&true&&&br /&&/div&
结果如下图（全部截自IE6浏览器）：
然后从新浪博客首页随便找篇文章，拷点文字复制进去，结果如下图：
可以看到可编辑标签高度自带撑开了。完全的CSS，没有杂碎的js代码。我们设置可以设定一个最大高度(max-height)，让其超出的时候出现滚动条，正如下面demo页面所做的一样。
您可以狠狠地点击这里：
然而，事情并不会如此一帆风顺，还有不少注意事项值得一提。
三、一些注意与说明
1、 现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框，而实际上textarea是没有虚框显示的，此迹象会暴露出div是个冒牌货，所以，需要添加下面的样式：
outline:0;
2、 Firefox浏览器下可编辑模式的div如果内部元素是空空的，那么其在获取焦点是时候，光标不可见或是与外部div齐高，这也是会暴露出自己是textarea冒牌货的，所以，默认情况下，我们可以在此div中增加一个孤单的&br /&换行标签。但是，IE8下，如果有个默认的br标签，光标位置可能会在第二行闪来闪去，所以，IE8下可编辑div里面默认是不能有br标签的，这个嘛，您自己想办法清掉吧。
3、 IE浏览器下（IE6~8），输入文字回车的时候，div内部是会自动产生p标签包含每行元素的，而其他浏览器貌似是产生br标签（这里尚未全部测试，如有不准，欢迎指正）。由于默认的p标签是有1em大小的上下margin值的，为了效果统一，我们可以设置诸如下面的样式清除p标签的margin值：
.test_box p{ margin: 0; }
4、可编辑模式的div输入的内容都会是很正宗的HTML代码，如果作为内容提交的话需要进行HTML字符过滤。还有，如果您是从其他页面上拷贝一段内容过来，然后粘贴到可编辑模式下的div中，会连HTML也完整的复制过来的（不同于textarea），所以，这里也有必要进行HTML字符过滤（例如web QQ）。
5、 IE6浏览器不支持max-height属性，所以，只用CSS是无法实现超过一定高度出现滚动条的效果，需要js配合实现。
6、 可编辑模式的div标签与textarea一样，是支持focus, blur事件的。自然也支持focus伪类，demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。
四、圣诞前夜之结语
明天平安夜，公司的老外市场主管raph已经回家过年去了，这几天是不会过来了。像圣诞节这种具有喜庆气息的日子，正是埋头写代码的好日子，因为比较容易受刺激。麻麻，无所谓啦，闷骚无敌，大不了什么时候去百合网，世纪佳缘什么的溜达溜达。
啊，就这些，感谢您的阅读。要是文章有表述不准确的地方欢迎指正。
相关热词搜索：
赞助商链接jquery $.text() 换行_百度知道
jquery $.text() 换行
&info&小牛情侣纸巾套，很可爱的一对小情侣哦！&br /&
赶快领回家吧！&br /&
超软的面料，超可爱的造型，冷冷的冬天抱在手上也是&br /&
很享受的事情哦！&/info&用Jquery+ajax+xml读取这段在xml里面的文字方法是$.text();输出方式是$.html()结果是不换行鼎害尺轿侔计踌袭穿陋，连&br /&都没有了我想知道一下这个问题是怎么回事可以解决么？有什么好方法。谢谢
MSN： 用jquery读取回来的data不能用$.html()我试过了，不能这么用
提问者采纳
jquery的 text()仅能读取出xml中不含标签的文字部分。而 html() 办法也绝对读不出xml中的标签。现在给你两种解决办法：办法一，不用ajax，而用jquery的load()办法。前提是你知道load()怎么用。将你需要读取的的xml代码块外面套一层html标签，比如div什么的，再给他加个ID，比如：&info&&div id=&xxx&&小牛情侣纸巾套，很可爱的一对小情侣哦！&br /&
赶快领回家吧！&br /&
超软的面料，超可爱的造型，冷冷的冬天抱在手上也是&br /&
很享受的事情哦！&/div&&/info&这样，用$(&选择器&).load(&xml文件的url #xxx&)就可以读出。这办法有2种缺点。一，这办法不是ajax，虽然有点像二，需要改动xml原文件。办法二，使用一小段jquery插件：/** * jQuery xml plugin - Converts XML node(s) to string * Dual licensed under the MIT and GPL * Copyright (c) 2009 Radim Svoboda
* @version 1.0.0 */jQuery.fn.xml=function(all){var s=&&;if(this.length)(((typeof all!='undefined')&&all)?this:jQuery(this[0]).contents()).each(function(){s+=window.ActiveXObject?this.xml:(new XMLSerializer()).serializeToString(this);});};以上为插件代码。使用以上代码后，就可以使用ajax读取xml文件中的文字和标签了。比如：$.get('xml文件url',function(data){$('选择器').html($(data).find('info').xml(0))});其中xml()括号里有两个参数0和1可以选。0代表读取 info标签里面的内容1代表读取 info标签以及标签里面的内容这种办法，缺点暂时没发现。好了，我写了那么多，分给我吧？
提问者评价
自己写的 不是摘抄来的 所以选你 谢谢！
其他类似问题
按默认排序
其他3条回答
html(val)设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。text(val)设置所有匹配元素的文本内容。与 html() 类似, 但将编码 HTML (将 &&& 和 &&& 替换成相应的HTML实体).text()取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。如：内含的&br /&得到的将是换行符；HTML 代码:
&p&&b&Test&/b& Paragraph.&/p&&p&Paraparagraph&/p& jQuery 代码: $(&p&).text(); 结果:鼎害尺轿侔计踌袭穿陋
Test Paragraph.Paraparagraph url = ?????指定的urldata = 指定的参数jQuery.ajax({
type : &GET&,
url : url,
data : data,
dataType : 'xml',//指定返回数据的格式
success: function(xml){
alert('成功返回。');
xmlObj = $(xml);//转成jQuery对象，转后相当于普通html节点来操作即可，当然也会有小小不同
alert(xmlObj.find('info').html());//前提是info是xml里面的节点且非根节点
alert(xmlObj.find('info').text());//比较下两者的不同
}, error:function(){
alert(&失败，可能是服务器端返回的数据的格式不符合xml标准！&);
参考资料：
jQuery1.4 API中文手册
$().print(&br /&);你试试另外就是建一个&p class=&br&&从jquery里面调用
用$.text()读取以后里面的&br/&标记就没有啦，变成普通的回车了。你再用html()输出，里面没有&br/&当然不会换行了。你应该用html()读出。
jquery的相关知识
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前位置:&&
本页文章导读:
&&&&?利用cookie记住背景颜色示例代码&&&&&&
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&&/title& &script type=......&&&&?jquery监听div内容的变化具体实现思路&&&&&&
我们做电子商务，javascript框架采用的是jQuery,在开发过程中遇到了上面标题列出的问题：如何监听div内容的变化。 先给出最终代码（后续进行相关分析）：
代码如下: var title = $("b.facility"); v......&&&&?让新消息在网页标题闪烁提示的jQuery代码&&&&&&
可能有一些站长会注意到这样的效果，就是我们在一些SNS社交、社区论坛浏览时，经常会看到收到的新消息会闪烁标题提示，那么这样的效果我们能不能运用在自己的网站呢，新消息在网页......
&&&&&&最新IT科技资讯推荐:
[1]利用cookie记住背景颜色示例代码
&&&&来源:&互联网& 发布时间:&
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&&/title& &script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"&&/script& &script src="Scripts/jquery.cookie.js" type="text/javascript"&&/script& &style type="text/css"& #p1{ background-color:R width:40 border:solid 1 margin:5 float:left} #p2{background-color:Ywidth:40 border:solid 1 margin:5 float:left} #p3{background-color:Bwidth:40 border:solid 1 margin:5 float:left} &/style& &script type="text/javascript"& $(function () { if ($.cookie("bgcolor")) { $("body").css("background-color", $.cookie("bgcolor")); } $("p").click(function () { $("body").css("background-color", $(this).css("background-color")); $.cookie("bgcolor", $("body").css("background-color"), { expires: 7 }); }) }) &/script& &/head& &body& &p id="p1"&红色&/p&&p id="p2"&黄色&/p&&p id="p3"&蓝色&/p& &/body& &/html&
[2]jquery监听div内容的变化具体实现思路
&&&&来源:&互联网& 发布时间:&
我们做电子商务，javascript框架采用的是jQuery,在开发过程中遇到了上面标题列出的问题：如何监听div内容的变化。 先给出最终代码（后续进行相关分析）：
代码如下: var title = $("b.facility"); var title = $('#title');//the element I want to monitor title.bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.target).html()); });
解决问题的思路如下： 我们先回顾一下jQuery事件中的change()方法定义和用法： 当元素的值发生改变时，会发生 change 事件。 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。 change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。 注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。 但是问题出现了关于div内容的改变change方法中只字不提，我们如何处理那？ 后续百度关键词： jquery div 内容发生变化：无果； 继续，bing关键词：jquery how to listen div change 找到一篇相关文档/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly 粗略的明白是采用自定义事件的方式去处理问题，采纳代码如下：
代码如下: $('#laneconfigdisplay').bind('contentchanged', function() { // do something after the div content has changed alert('woo'); }); // 这样会调用上面的函数 $('#laneconfigdisplay').trigger('contentchanged');
但是contentchanged是什么内容没有说明，继续追溯 bing关键词：jquery how to listen div change 找到一篇相关文档 继续，bing关键词：jquery contentchanged 找到一篇相关文档/questions/1449666/create-a-jquery-special-event-for-content-changed 这篇文章详细说明了contentchanged内容定义，采纳代码如下：
代码如下: jQuery.fn.watch = function( id, fn ) { returnthis.each(function(){ var self = var oldVal = self[id]; $(self).data( 'watch_timer', setInterval(function(){ if(self[id] !== oldVal) { fn.call(self, id, oldVal, self[id]); oldVal = self[id]; } },100) ); });
}; jQuery.fn.unwatch = function( id ) { returnthis.each(function(){ clearInterval( $(this).data('watch_timer') ); }); };
创建自定义事件
代码如下: jQuery.fn.valuechange = function(fn) { returnthis.bind('valuechange', fn); }; jQuery.event.special.valuechange = { setup: function() { jQuery(this).watch('value', function(){ jQuery.event.handle.call(this, {type:'valuechange'}); }); }, teardown: function() { jQuery(this).unwatch('value'); } };
貌似这样的解决是完美的但是后续再继续查看到时候，发现有更简洁的方式，代码如下：
代码如下: var title = $("b.facility"); var title = $('#title');//the element I want to monitor title.bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.target).html()); });
感觉这应该是我需要代码，do it ！fine
[3]让新消息在网页标题闪烁提示的jQuery代码
&&&&来源:&互联网& 发布时间:&
可能有一些站长会注意到这样的效果，就是我们在一些SNS社交、社区论坛浏览时，经常会看到收到的新消息会闪烁标题提示，那么这样的效果我们能不能运用在自己的网站呢，新消息在网页标题闪烁显示的效果如何实现？小编有幸在某牛人技术博客看到这样的代码，基于jquery框架。 为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，特别新增网页版演示。
代码如下: &!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& &html& &head& &base href="&%=basePath%&"& &title&My JSP 'test.jsp' starting page&/title& &/head& &body& &p & 请看网页标题处效果！ &br /& 隔10秒后提示消失 &/p& &script type="text/javascript" src="script/jquery-2.0.3.js"& &/script& &script type="text/javascript"& (function($) { $.extend( { /** * 调用方法： var timerArr = $.blinkTitle.show(); * $.blinkTitle.clear(timerArr); */ blinkTitle : { show : function() { //有新消息时在title处闪烁提示 var step = 0, _title = document. var timer = setInterval(function() { step++; if (step == 3) { step = 1 } if (step == 1) { document.title = '【　　　】' + _title } if (step == 2) { document.title = '【新消息】' + _title } }, 500); return [ timer, _title ]; }, /** * @param timerArr[0], timer标记 * @param timerArr[1], 初始的title文本内容 */ clear : function(timerArr) { //去除闪烁提示，恢复初始title文本 if (timerArr) { clearInterval(timerArr[0]); document.title = timerArr[1]; } } } }); })(jQuery); // Resources from http://www./down jQuery(function($) { var timerArr = $.blinkTitle.show(); setTimeout(function() { //此处是过一定时间后自动消失 $.blinkTitle.clear(timerArr); }, 10000); //若认为操作消失，只需如此调用： $.blinkTitle.clear(timerArr); }); &/script& &br /& &center& 如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码： &a href='http://www./' target='_blank'&http://www./&/a& &/center& &/body& &/html&
最新技术文章:
特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除！
(C)2012-,站长邮箱:www_169it_(请将#改为@)HTML &div& 标签页面导航：
→ 正文内容 jQuery设置disabled
使用jQuery设置disabled属性与移除disabled属性
Readonly只针对input和textarea有效，而disabled对于所有的表单元素都有效，下面为大家介绍下使用jQuery设置disabled属性
表单中readOnly和disabled的区别：
Readonly只针对input(text/ password)和textarea有效，而disabled对于所有的表单元素都有效，包括select,radio, checkbox, button等。
但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submitbutton却是可以使用的）。
function disableElement(element,val){
document.getElementById(element).disabled=
jQuery进行操作：
//两种方法设置disabled属性
$('#areaSelect').attr("disabled",true);
$('#areaSelect').attr("disabled","disabled");
//三种方法移除disabled属性
$('#areaSelect').attr("disabled",false);
$('#areaSelect').removeAttr("disabled");
$('#areaSelect').attr("disabled","");
获取s:textfield，并设置其disabled属性：
functiondisableTextfieldofAccountDiv(element,val) {
$(element).find(":textfield").attr('disabled',val);
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910