jquery对textarea的控制大小

最新推荐文章于 2024-06-11 09:32:12 发布
最新推荐文章于 2024-06-11 09:32:12 发布
阅读量3.2k 收藏
点赞数
分类专栏： jquery 文章标签： jquery jQuery JQUERY Jquery JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/G631233828/article/details/8455843
版权
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>


<style type="text/css"> 
.highlight{
background:#FF3300;
}
</style> 


<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $comment=$('#comment');
$('.bigger').click(function(){
if(!$comment.is(":animated")){
if($comment.height()<500){
//重新设置高度，在原有的基础上+50
//$comment.height($comment.height()+50);
//$comment.width($comment.width()+50);
//$comment.animate({height:"500",width:"600"},300);
//$comment.animate({rows:"+=50",cols:"+=50"},300);
$comment.animate({height:"+=50",width:"+=50"},300);

}
}

});
$('.smaller').click(function(){
if(!$comment.is(":animated")){
if($comment.height()>50){
//重新设置高度，在原有的基础上-50
//$comment.height($comment.height()-50);
//$comment.width($comment.width()-50);
$comment.animate({height:"-=50",width:"-=50"},300);
}
}

});
$('.up').click(function(){
if(!$comment.is(":animated")){
if($comment.height()>50){
//重新设置高度，在原有的基础上-50

$comment.animate({scrollTop:"-=50"},300);
}
}

});
$('.down').click(function(){
if(!$comment.is(":animated")){
if($comment.height()>50){
//重新设置高度，在原有的基础上-50

$comment.animate({scrollTop:"+=50"},300);
}
}

});
})



</script>






<body>
<form>
<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
            <span class="smaller" >缩小</span>
            <span class="up" >向上</span>
            <span class="down" >向下</span>
            </div>
    <div>
        <textarea id="comment" rows="8" cols="20">
            多行文本框 
            </textarea>
        
        </div>
    </div>
</form>


</body>

</html>


欢迎大家加入java资源免费分享群，群号：814657026

fliay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery控制textarea长度
wyyl1的专栏
06-27 1799
// 控制textarea长度jQuery(document).ready(function() {    jQuery(#textContent).keydown(function() {     textCounter(this.form.textContent,this.form.remLen,20);    });       jQuery(#textCont
jquery textarea 自动调整高度之autoResize插件
记录技术点点之路
08-16 448
autoResize.js /* * jQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04 */ (function($){ $.fn.autoResize = function...
推荐开源项目：jQuery highlightTextarea
gitblog_00092的博客
06-11 349
推荐开源项目：jQuery highlightTextarea 项目地址:https://gitcode.com/garysieling/jquery-highlighttextarea 1、项目介绍 在Web开发中，为用户提供友好的交互体验是至关重要的。jquery-highlighttextarea 是一款基于jQuery的插件，专为增强<textarea>和<input&g...
textarea 怎么固定大小，不让调整
weixin_30511039的博客
02-19 995
转载：https://www.cnblogs.com/weijieyun/p/6098093.html 1：彻底禁用拖动（推荐） resize:none; 2：只是固定大小，右下角的拖动图标仍在 width:200px; height:100px; ...
jQuery_review之textarea的放大和缩小的jQuery实现
似水流年
07-24 2836
众所周知，各种浏览器对于HTML、CSS以及原生JS的支持不尽相同。但是jQuery很好地封装了各种浏览器不同的实现，能够很好地解决跨浏览器的CSS问题。下面就是在review表单操作的时候的一个DEMO，记录在这个地方，方便后面做项目的时候查找使用，这个如果添加动画效果会更好，jQuery所有的动画效果都是可以通过animate函数来实现。 $(functi
jquery操作textarea
web开发自学
10-26 232
只看例子就明白了 &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="jquery-1.2.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript&
jquery实现textarea输入字符控制(仿微博输入控制字符)
10-27
在这个给定文件中，主要讲述了如何使用jQuery来实现对textarea输入框字符数量的控制，实现过程类似于微博中的输入控制字符功能。这里将详细解析关键知识点，包括jQuery基本操作、textarea输入框的处理、字符数量的...
jquery新浪发布微博textarea文本框限制文字字数表单
11-02
在创建一个textarea时，我们需要设置`rows`和`cols`属性来定义其大小，还可以通过`name`属性来指定其名称，方便在服务器端获取数据。 三、文字字数限制 在微博发布功能中，通常会限制用户输入的字符数，以防止滥用...
javascript jquery对form元素的常见操作详解
10-22
对于文本框，我们可以控制其大小。如文章中所示，可以通过给textarea元素设置style属性，禁止用户调整文本框的大小，例如： ```html <textarea name="123" style="resize:none;"></textarea> ``` 以上就是文章中...
textarea剩余字数
06-21
`textarea`的样式可以通过CSS进行定制，包括边框、背景色、字体大小和颜色等。例如： ```css textarea { border: 1px solid #ccc; padding: 10px; font-size: 14px; } ``` ### 6. 表单验证 在HTML5中，可以...
jQuery评论框插入QQ表情特效代码
05-13
【jQuery评论框插入QQ表情特效代码】是一种在前端开发中常见的功能实现，它结合了JavaScript、ECMAScript和jQuery库，旨在为用户在评论输入框中提供类似QQ聊天中的表情选择和插入体验。这个功能在社交网站、博客、...
jquery.resizeTextarea:键入时调整文本区域的大小
05-19
jQuery Resize Textarea插件 在键入时调整文本区域的大小。 入门 NPM 使用NPM安装软件包并将其添加到您的依赖项中： npm install @mogusbi/jquery.resizetextarea --save 将其介绍给您的页面 在页面中包含jQuery， 和插件。 使用resizeTextarea方法键入时，选择希望调整大小的文本区域。 <!doctype html > < html > < head > ... </ head > < body > < textarea > </ textarea > < script src =" jquery.js " > </ script > < script src =" jquery.copycss.js " > </ script > < scrip
jquery textarea 启用、禁用 判断状态
清叶 的专栏
07-23 8880
//禁用 $("#name").attr("disabled",true);  //取消禁用 $("#name").attr("disabled",false);  //判断是否禁用状态 if($("#name").attr("disabled")){ //禁用 }else{ }
jquery控制textarea随文字自动增高
技术资料收集站
03-21 1762
$.fn.autoTextarea = function (options) {             var defaults = {                 maxHeight: null,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度                 minHeight:
jquery动态改变textarea高度，高度随着内容增加而自动变高，内容减少而自动变低
格林王子举哥
11-02 937
直接看jquery代码，复制过去即可使用： 使用之前先注册方法 jQuery.fn.extend({ autoHeight: function(){ return this.each(function(){ var $this = jQuery(this); if( !$this.attr('_initAdjustHeight') ){ $this.attr('_initAdjustHeight',
textarea用resize控制输入框的宽度和高度
coding乐园
03-07 5026
none：用户不能操纵机制调节元素的尺寸； both：用户可以调节元素的宽度和高度； horizontal：用户可以调节元素的宽度； vertical：让用户可以调节元素的高度； inherit：默认继承。var test = document.createElement('textarea'); test.setAttribute('style','width:100%;height:15
html textarea文本域高度自适应
weixin_40841731的博客
02-24 1187
1、可直接在 菜鸟教程网站测试页面中测试 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt; &amp
textarea文本域宽度和高度（width、height）自动适应变化处理
热门推荐
halfsking的博客
01-12 3万+
textarea通过cols和rows设置宽度和高度；也可以用style来设置width和height，分别介绍：   1. 设置宽度100%，textarea宽度随父元素变化； 2. 设置rows，textarea高度会发生变化，不再是仅仅一行；   以下是演示html，转载自：http://blog.csdn.net/domingoluis/article/details/667...
jquery禁止textarea输入
最新发布
07-25
- 当页面加载完成时，可以添加额外的代码来控制是否允许再次编辑 textarea。 以上代码展示了如何通过jQuery简单地禁用一个文本区域输入。你可以根据需要调整CSS样式、函数的逻辑或是添加更多的事件处理机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值