精华内容
下载资源
问答
  • 我有一个textArea,当字体较大时占据整个屏幕 . 但是如果字体较小,则会留下很大的空间 . textArea有margin,padding为零 . 在模拟器和真实设备中都可以看到这个问题(我在Android设备上检查过) .Form hi = new Form...

    我有一个textArea,当字体较大时占据整个屏幕 . 但是如果字体较小,则会留下很大的空间 . textArea有margin,padding为零 . 在模拟器和真实设备中都可以看到这个问题(我在Android设备上检查过) .

    Form hi = new Form("Hi World", new BorderLayout());

    hi.show();

    TextArea priceLabel = new TextArea("AG and Company works in Nepal for manufacturing, marketing and exporting herbal products and organic argo products. The products include organic coffee, spices, body care products, crude herbs, cosmetic products, and vegetable oil and herbal teas. The organization is located in Sinamangal, Kathmandu and the chairman is Mr.Sitaram Adhikari.");

    priceLabel.setUIID("small");

    priceLabel.getAllStyles().setMarginLeft(1);

    priceLabel.setEditable(false);

    priceLabel.setGrowByContent(true);

    priceLabel.setFocusable(false);

    priceLabel.setScrollVisible(false);

    priceLabel.getAllStyles().setBgColor(0xff0000);

    priceLabel.getAllStyles().setBgTransparency(255);

    priceLabel.getAllStyles().setMargin(0,0,0,0);

    priceLabel.getAllStyles().setPadding(0,0,0,0);

    Container herbDetailContainer = BoxLayout.encloseY(new Label(), priceLabel);

    herbDetailContainer.setScrollableY(true);

    hi.add(BorderLayout.CENTER, herbDetailContainer);

    hi.revalidate();

    字体大小1毫米(原生:MainThin)

    9f574ed94ccb788766e44f82e8fcaa85.png

    字体大小2毫米(原生:MainThin)

    0bdf4c2d3c864fc6b52ed89dd7a81e1d.png

    字体大小3毫米(原生:MainThin)

    179dcab8e37f8498b96dca5a36aebeef.png

    字体大小4毫米(原生:MainThin)

    0919e4bd6f31c6e0ffe466cadb89533e.png

    展开全文
  • 在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体布局。 二、原因  通过调用window...

    一、前言                          

      在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体布局。

     

    二、原因                           

    通过调用 window.getComputedStyle(textarea元素, null).resize 返回both,我们可以知道原来是resize样式属性搞的鬼。

     

    三、CSS3属性──resize                    

    用于设置UserAgent调整元素尺寸的机制,就是说设置用户能否和如何自行改变元素尺寸。

    值范围

    none:不允许UserAgent调整元素尺寸;

    both :允许UserAgent调整元素水平、垂直方向的尺寸;

    vertical:允许UserAgent调整元素垂直方向的尺寸;

    horizontal:允许UserAgent调整元素水平方向的尺寸;

    inherit :继承父元素

     

    在FF、Chrome和Safari下

    对于div来说resize属性值时inherit(其实就是none),而对于textarea而言默认值为both。

     

    四、解决办法                        

      为textarea设置 resize: none

     

    尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3940728.html ^_^肥仔John

    如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

    本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/3940728.html,如需转载请自行联系原作者


    展开全文
  • 我就想知道怎么设置着2个textarea和lable的大小啊???????importjava.awt.*;importjava.awt.event.*;importjava.io.IOException;importjava.net.*;importjava.io.*;publicclass...我就想知道 怎么设置着2个 ...

    我就想知道怎么设置着2个textarea和lable的大小啊???????importjava.awt.*;importjava.awt.event.*;importjava.io.IOException;importjava.net.*;importjava.io.*;publicclass...

    我就想知道 怎么设置着2个 textarea 和 lable的大小啊???????

    import java.awt.*;

    import java.awt.event.*;

    import java.io.IOException;

    import java.net.*;

    import java.io.*;

    public class d1 {

    public static void main(String[] args) {

    frame f = new frame("哈哈");

    }

    }

    class frame extends Frame {

    frame(String s){

    super(s);

    Panel p1 = new Panel();

    this.add(p1);

    TextArea t1 = new TextArea("hello",20,30);

    t1.setBounds(0, 50, 700, 550);

    p1.add(t1);

    p1.setLayout(new GridLayout(3,1));

    Label l = new Label("欢迎");

    l.setSize(700, 30);

    p1.add(l);

    TextArea t2 = new TextArea("hello",20,30);

    p1.add(t2);

    t2.setBounds(0, 620, 700, 130);

    this.pack();

    A a = new A ();

    this.addWindowListener(a);

    this.setVisible(true);

    }

    }

    class A extends WindowAdapter {

    public void windowClosing(WindowEvent e){

    System.exit(1);

    }

    }

    展开

    展开全文
  • 阅读全文你将获得以下解决方案。点击长文本编辑textarea,自动获得焦点随着输入值自动伸缩高度可复制添加信息可粘贴文本可...查文档 MDN,textarea元素存在**selectionEnd和selectionStart**的属性用来表示选中的文...

    阅读全文你将获得以下解决方案。

    点击长文本编辑textarea,自动获得焦点

    随着输入值自动伸缩高度

    可复制添加信息

    可粘贴文本

    可粘贴图片

    以下实例代码执行环境为Chrome80

    方案一

    HTML5 Textarea 元素

    1. 自动获得焦点

    点击编辑自动获得焦点后光标跳转到了最前面,why?

    0cd95830e2ca471ff404b8fa17736e68.png

    查文档 MDN,textarea元素存在**selectionEnd和selectionStart**的属性用来表示选中的文本开始位置和结束位置,DOM接口实例是 HTMLTextAreaElement, 它具有 **setSelectionRange**方法,用来选中输入框中的文本,用法:TextAreaElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

    那么我们只要做到selectionStart === selectionEnd === value.length, 这样光标就选中到最末尾。

    edit.addEventListener("click", function() {

    txt.classList.add("hidden");

    document.body.insertBefore(textarea, edit);

    textarea.innerHTML = "这是需要编辑的信息";

    textarea.focus();

    // textarea.selectionEnd = textarea.innerHTML.length;

    textarea.setSelectionRange(

    textarea.innerHTML.length,

    textarea.innerHTML.length

    );

    });

    复制代码

    2. 自适应高度

    当不设置高度时换行会出现滚动条,所以只要让textarea滚动条消失,让其height = scrollHieght, 那么如何监听textarea的变化,则需要input事件,让textarea高度动态等于它的scrollHeight即可,代码如下:

    textarea.addEventListener("input", function() {

    this.style.height = `${this.scrollHeight}px`;

    });

    复制代码

    54f74911bb3ec4a221068d45e295a20d.png

    为什么每次输入都会使得高度增加(每次增加4px),经过测试Safari同样也是这个效果,Firefox符合预期高度不异常增加,查看Chrome控制台发现(查看 chromium) textarea内置了很多样式,尝试将去掉padding后,可以正常随着内容增加高度自适应了。

    textarea {

    padding: 0;

    }

    const textarea = document.createElement("textarea");

    textarea.addEventListener("input", function(e) {

    this.style.height = `${this.scrollHeight}px`;

    });

    复制代码

    为什么去掉padding值,输入后高度就不增加了?(未找到合理的解释,欢迎留言讨论解答)

    但是删除文本的情况下height并未能自动缩放,分析原因, 当删除文本换行的时候scrollHeight的大小并未发生改变,scrollHeight作为只读属性( MDN-文档),如何让scrollHeight高度重新计算哪?只有改变高度,于是:

    textarea.addEventListener("input", function(e) {

    this.style.height = "inherit";

    this.style.height = `${this.scrollHeight}px`;

    });

    复制代码

    到此高度自适应输入内容完成,但是每次换行的闪动很难受,transition走一波,

    textarea {

    overflow: hidden; // 防止换行出现滚动条闪动

    padding: 5px 10px;

    box-sizing: border-box;

    transition: all 0.2s linear;

    }

    复制代码

    结果transition并没效果,原因height初始值或者参考值必须为数值过渡动画才会生效,height设置为auto或者inherit动画不会生效, 所以折中的办法就是当删除的时候重新重置高度,输入时不需要重置,这样输入时动画生效, 删除没有动画, 暂时没想到更好的办法。

    textarea.addEventListener("keyup", function(e) {

    if (e.keyCode === 8) {

    this.style.height = "inherit";

    this.style.height = `${this.scrollHeight}px`;

    } else {

    this.style.height = `${this.scrollHeight}px`;

    }

    });

    复制代码

    3. 支持粘贴文本,图片等

    textarea只能输入文本,无法实现粘贴图片。

    textarea.addEventListener(

    "paste",

    function(e) {

    e.preventDefault();

    console.log(

    "paste",

    e.clipboardData.items,

    e.clipboardData.types,

    e.clipboardData.getData("text/html"),

    e.clipboardData.getData("text/plain"),

    e.clipboardData.getData("text/Files")

    );

    },

    false

    );

    复制代码

    方案二

    div contenteditable 替换textarea

    1. 自动获得焦点

    编辑div contenteditable为true,然后利用Range和Selection 光标移动到最后的效果。

    edit.addEventListener("click", () => {

    textarea.setAttribute("contenteditable", true);

    textarea.focus();

    const range = document.createRange();

    // range 包含的内容

    range.selectNodeContents(textarea);

    // range.setStart(textarea.firstChild, 0);

    // range.setStart(textarea.lastChild, textarea.innerHTML.length);

    // 起始位置是否相同

    range.collapse(false);

    const sel = window.getSelection();

    // 将所有的区域都从选区中移除。

    sel.removeAllRanges();

    // 一个区域(Range)对象将被加入选区。

    sel.addRange(range);

    });

    复制代码

    2. 自适应高度

    div contenteditable 天然支持根据输入来自适应高度。

    3. 粘贴图片, 文本等

    textarea.addEventListener("paste", function(e) {

    e.preventDefault();

    const clipboardData = e.clipboardData || e.originalEvent.clipboardData;

    // 获取纯文本

    let text = clipboardData.getData("text/plain");

    let file = clipboardData.getData("text/plain");

    // console.log(clipboardData.items, clipboardData.getData("text/Files"));

    // 插入img,可以做一些上传图片的一些操作

    insertImg(clipboardData);

    // 只输入纯文本

    document.execCommand("insertText", false, text);

    });

    复制代码

    此方法可以限定只能上传文本或者图片。

    欢迎留言讨论其他textarea高度是适应的方案。

    b739ec46bb5c46d9c0aa4ce35ba1ea56.png

    关于找一找教程网

    本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。

    本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。

    [textarea高度自适应的两种方案]http://www.zyiz.net/tech/detail-124541.html

    展开全文
  • CSS (The CSS) Textarea resize control is available via the CSS3 resize property: Textarea调整大小控件可通过CSS3调整大小属性使用: textarea { resize:both; } /* none|horizontal|vertical|both */ ...
  • 我们知道文本框可以有一个为maxlength的属性,可以限制文本框的长度,当时备注框textarea却没有,那么要怎样限制备注框的长度呢?其实很简单,只有加上想这样一句话onKeyDown='if (this.value.length>=20){event....
  • bootstrap模态框中textarea大小调整

    万次阅读 2018-06-12 23:44:15
    在使用bootstrap模态框时表单元素中有textarea,但是无法使用网上说的cols和rows来控制这个模态框的大小,这个时候需要使用 <textarea class="form-control" id="deblock_udid" name=&...
  • django textarea 大小设定

    2015-10-18 14:57:00
     'contents': forms.Textarea(attrs={  'style': 'height: 200px;width:500px'}),  } 或者是: class puppet_edit_confForm(forms.ModelForm):  class Meta:  model = puppet_edit_config  fields = ...
  • 最多两行),我偶然偶然发现了这个…基本上,给定合适的布局管理器,这个组件可以自己增长 – 它实际上是有道理的,但让我感到惊讶……此外,您可能希望使用ComponentListener来监视组件何时更改大小,如果这是您感兴趣的…...
  • jgrow是一个根据文本长度调整textarea大小的jQuery插件。 jquery 1.2.x.测试通过,支持IE6 / 7 、Firefox2.0.x和Opera 9.x 。 官网:http://lab.berkerpeksag.com/jGrow 收集:Ksir 转载于:...
  • } } 或者,如果你真的想保持的BoxLayout然后离开保持setLayout的(...)语句,然后设置最大尺寸等于优先停留大小。很多人会说你不应该直接调用“setXXX()”方法,而应该重写scrollpane的setMaximumSize()方法以返回...
  • // 初始化整个cleditor的高度,宽度默认大小 $('#textarea-id').cleditor({height: 400}); $("textarea").cleditor(); // 因为cleditor的文本内容在一个frame中,所以要得到$frame设置它的高度 // ...
  • 在此文中,我将和大家分享一下多行文本区域大小的设置和resize学习时记录的一点东西,希望对新手朋友有用。   一、不为设置宽高属(此时浏览器显示的文本框宽高属性为其默认值)   1、谷歌、360浏览器 ...
  • 限制textarea输入字符长度(转自milantgh文章)  textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,...
  • 1、使用Chrome的都知道,当鼠标焦点在input、textarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,outline这个属性。你可以用下面的css代码...
  • elementUI的textarea设置大小

    万次阅读 2019-04-23 23:49:31
    <el-form-item label="活动形式"> <el-input type="textarea" :rows="2" v-model="form.desc"></el-input> </el-form-item> :默认rows=" 2 " ...改变数值即可改变textarea大小 ...
  • 主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下
  • textarea固定大小

    2015-05-07 22:03:51
    有可拖动大小的图标; width:210px; max-width:210px; height:60px; max-height:60px; 无图标: resize: none;
  • textarea 自适应父容器大小

    万次阅读 2015-05-04 11:30:40
    textarea 自适应父容器大小
  • CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 浏览器支持 表格中的数字表示支持该属性的第...注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。
  • textarea 在浏览器中固定大小和禁止拖动 HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width ...
  • 怎么让textarea随着文字高度自动改变 有一次项目开发中遇到这样一个需求,在不确定文本内容的多少情况下,怎么做到元素能随文本大小实时显示。当然说到文本,首先想到的是input标签和textarea标签。但是,这两个...
  • 在s标签写的form中,无法利用rows="50" cols="75"来改变s:textarea大小,cssClass也不管用时; 直接用普通的textarea,设置CSS样式的方式来作处理 <style> .financeInfo_textbox{ height:120px; ...
  • textarea自动调整大小的js代码,需要的朋友可以参考下。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 676
精华内容 270
关键字:

textarea大小