相关疑难解决方法(0)

使用自动调整大小创建textarea

还有另外一个关于这个问题,我试过了.但是有一个问题:textarea如果删除内容,则不会缩小.我找不到任何方法将它缩小到正确的大小 - clientHeight值返回为完整的大小,而textarea不是其内容.

该页面的代码如下:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 ) …

Run Code Online (Sandbox Code Playgroud)

html javascript height textarea resize

Dis*_*oat

2018 03-24

328
推荐指数

15
解决办法

38万
查看次数

Textarea自动高度

我想让textarea的高度等于其中文本的高度(并删除滚动条)

HTML

<textarea id="note">SOME TEXT</textarea>

Run Code Online (Sandbox Code Playgroud)

CSS

textarea#note {
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:linear-gradient(#F9EFAF, #F7E98D);
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

Run Code Online (Sandbox Code Playgroud)

JsFiddle:http://jsfiddle.net/Tw9Rj/

html javascript css

Moh*_*eri

2015 12-28

146
推荐指数

6
解决办法

35万
查看次数

有没有办法让textarea伸展以适应其内容而不使用PHP或JavaScript？

我正在填写textarea内容供用户编辑.

是否有可能使其伸展以适应CSS的内容(如overflow:showdiv)？

html css

sig*_*nce

2018 08-08

65
推荐指数

8
解决办法

7万
查看次数

在Ace Cloud 9编辑器中自动调整内容的高度

我正在尝试将Ace编辑器添加到页面中,但我不知道如何根据其内容的长度自动设置高度.

理想情况下它会起作用,所以当内容改变时,重新计算高度,但我会对页面加载时设置的高度感到满意.

对于JavaScript新手,有人可以帮我弄清楚我如何计算代码的长度,跨越多少行,新高度是什么以及如何更新DOM以反映这一点？

我在谷歌小组中找到了这个建议,但我真的不明白它在做什么以及如何调整高度.

editor.getSession().getDocument().getLength() *
editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth()

Run Code Online (Sandbox Code Playgroud)

javascript ace-editor

lim*_*oop

2017 11-20

61
推荐指数

4
解决办法

4万
查看次数

实施可调整大小的textarea？

Stackoverflow如何实现可调整大小的textarea？

这是他们自己推出的东西,还是我可以轻松附加到我网站上的textareas的公开组件？

我发现了这个问题并没有完全符合我的要求.

自动调整大小,文本区域

这更多地讲述了自动调整textareas的大小,而我想要一个可以上下拖动的小抓取区域.

html textarea resize

Mar*_*iek

2017 05-23

22
推荐指数

2
解决办法

3万
查看次数

部分运行代码为html和文本

介绍

我目前正在创建一个模板构建器,用户可以在其中为应用程序构建模板.用户可以拖放多个块,例如文本块和"自定义代码"块.该模板将在应用程序中解析.现在,模板看起来像这样:

<section>
    <div class="row">
        <div class="col-sm-12">
            <section data-type="code">
                <#code></#code>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" data-type="container-content">
            <section data-type="text">
                <u>Lorem</u> ipsum
            </section>
        </div>
    </div>
</section>

Run Code Online (Sandbox Code Playgroud)

因此,此模板包含两个元素(请参阅data-type属性):一部分是自定义编写的代码.在这里,用户编写了自定义代码,包括Apache Freemarker代码.第二部分是自定义书面文字.

情况

上面的代码将以两种不同的方式使用.

确切地说,这段代码将在使用模板的应用程序中使用(这就是为什么他们应该能够编写Freemarker代码,因为这将被解析).
在我的网站上,用户应该能够编辑此模板.因为代码存储在数据库中,如上所述,存在一个问题:

问题

当我在Web界面中直接渲染模板时,该text部件将使用<u></u>标签正确呈现,但该code部件也将呈现为html,这可能会导致奇怪的行为(例如freemarker表示法</#list>被自动转换为).

但是,如果我将完整模板仅渲染为文本,则text带有<u></u>标记的部分也不会被渲染.

预期结果

我想用JavaScript/jQuery读取模板变量,然后data-type用texthtml和codetext 解析每个变量.

我如何循环模板并执行此操作？

html javascript jquery templates escaping

Jor*_*rdy

2017 12-27

19
推荐指数

2
解决办法

412
查看次数

JQuery TextArea AutoGrow插件

我正在努力寻找最好的textarea autogrow插件.我需要一个调整textarea的大小,即使我粘贴到它.任何的想法？

jquery

Hir*_*esh

lucky-day

8
推荐指数

2
解决办法

2万
查看次数

使用twitter-bootstrap时,将textarea缩放到网页

我正在尝试根据页面大小制作textarea比例.即我试图让textarea填充第二个容器和页脚之间的空间.

HTML:

    <!DOCTYPE html>
    <html>
      <head>
        <title>MySite</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <!-- Bootstrap -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="sticky-footer.css" rel="stylesheet">
      </head>
  <body>
      <div id="wrap">
        <div class="container">
            <h4 class="well well-sm">My site </h4>
        </div>
        <div class="container">
          <div class="well well-sm">
          <div class="btn-group">
            <button type="button" class="btn btn-default">Domain</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Test</a></li>
              <li><a href="#">Test 2</a></li>
            </ul>
          </div>
          <div class="checkbox inline">
            <label>
              <input type="checkbox" id="checkBoxError">Error</input>
            </label>
          </div>   
          </div> 
        </div>
        <div class="container">
          <textarea …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap

Dar*_*ast

lucky-day

7
推荐指数

1
解决办法

2万
查看次数

调整textarea的大小以适合所有内容

我正在尝试尽可能紧密地调整textarea的大小以适应其中的内容.这是我目前的努力:

function resizeTextarea(t) {
a = t.value.split('\n');
b = 1;
for (x = 0; x < a.length; x++) {
    c = a[x].length;
    if (c >= 75) b += Math.ceiling(c/75);
    }
b += a.length;
t.rows = b;
}

Run Code Online (Sandbox Code Playgroud)

这很好用,但是当用户通过填充宽度将文本"推"到下一行时似乎失败了.(注意:这里使用的75代表我的textarea的字符宽度)

还有一个奇怪的效果,其中[enter] [key]使textarea 2行超过文本的结尾,然后下一个[key]将其带回预期的一个额外行.如果c <= 1,我尝试将c设置为2,没有效果.这个并不是什么大不了的事,但纠正它会很好.

任何帮助,将不胜感激.

注意:在按下键时调用此函数.

javascript

Ale*_*x S

lucky-day

3
推荐指数

1
解决办法

1万
查看次数

我textarea的背景是一个手绘框。我希望height背景图片的内容与其中的文字一起伸展。因此，当输入的文本超出的height/ width时textarea，而不是看到滚动条，图像（以及文本框本身）的大小将调整为与文本的整个高度匹配。我认为可以通过为CSS 添加一个min-height: 200px/ max-height:100%来解决此问题，textarea但不知道如何正确实现。

我使用的代码是：

    textarea{ 
        background: #FFF url(box.png) no-repeat 0px 0px;
        background-attachment:fixed;
        width: 605px;
        height: 200px;
        line-height:20px;
        padding:30px;
        text-indent:3px;
        margin:0;
        border: none;
    }

Run Code Online (Sandbox Code Playgroud)

<textarea type="text" class="textbox" size="14"></textarea>

Run Code Online (Sandbox Code Playgroud)

编辑：只是为了澄清，这不是我们将要使用的实际图像，设计师正在做一个更好的版本-只是我在油漆中拼凑了一个。

html css textarea

JVG*_*JVG

2011 12-23

2
推荐指数

1
解决办法

6136
查看次数

标签统计

html ×7

javascript ×5

css ×4

textarea ×3

jquery ×2

resize ×2

ace-editor ×1

escaping ×1

height ×1

templates ×1

twitter-bootstrap ×1

标签 统计

标签统计