相关疑难解决方法(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万
查看次数

如何使用Prototype自动调整textarea？

我正在为我工作的公司开发一个内部销售应用程序,我有一个允许用户更改交付地址的表单.

现在我认为它会看起来更好,如果我用于主要地址细节的textarea只占用其中文本的区域,并在文本被更改时自动调整大小.

这是目前的截图.

ISO地址

有任何想法吗？

@克里斯

一个好点,但有理由我希望它调整大小.我希望它占用的区域是其中包含的信息区域.正如你在屏幕截图中看到的那样,如果我有一个固定的textarea,它会占用相当大的垂直空间.

我可以减少字体,但我需要地址大而且可读.现在我可以减小文本区域的大小,但是我遇到的问题是地址行需要3或4行(一行需要5行).需要用户使用滚动条是一个主要的禁忌.

我想我应该更具体一点.我正在垂直调整大小,宽度无关紧要.发生这种情况的唯一问题是,当窗口宽度太小时,ISO编号(大"1")会被推到地址下(正如您在屏幕截图中看到的那样).

这不是要有一个gimick; 它是关于有一个用户可以编辑的文本字段,它不会占用不必要的空间,但会显示其中的所有文本.

虽然如果有人想出另一种解决问题的方法,我也会对此持开放态度.

我已经修改了一些代码,因为它的行为有点奇怪.我将其更改为在keyup上激活,因为它不会考虑刚刚输入的字符.

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount += 1 + Math.floor(l.length / cols); // Take into account long lines
  })

  $('iso_address').rows = linecount;
};

Run Code Online (Sandbox Code Playgroud)

html javascript css textarea prototypejs

Mik*_*ike

2019 01-03

115
推荐指数

7
解决办法

13万
查看次数

使输入元素(type ="text")处理多行文本

我已经创建了一个带有输入的表单,但该框仅处理单行中的文本.我想设置它以使输入字段类似于Twitter的输入字段,其中框本身是多行:

当你点击输入时它也会扩展:

这是我现在拥有的:

<form name="userForm">
  <input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
  <button type="submit" id="button">Submit</button>
</form>

Run Code Online (Sandbox Code Playgroud)

我已经设置了按钮和输入的样式,但没有做任何改变其形状的事情,所以它是默认的.我有什么调整才能实现这一目标？

html css forms twitter input

Ala*_*anH

2016 12-24

4
推荐指数

2
解决办法

5万
查看次数

ion-textarea 在 Ionic 5 中动态调整高度

我正在将我的项目从 Ionc3 迁移到 Ionic5。我有一个 ion-textarea ，它会随着用户键入而增加高度，并且它在 Ionic3 中工作。以下是代码。

HTML 页面：

<ion-textarea #hvUserPost type="text" (input)="adjustDesc()"></ion-textarea>

Run Code Online (Sandbox Code Playgroud)

TS页面：

@ViewChild('hvUserPost') hvUserPost: ElementRef;
adjustDesc() {
    let textArea;
    textArea = this.hvUserPost['_elementRef'].nativeElement.getElementsByClassName("text-input")[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    var scrollHeight = textArea.scrollHeight;
    textArea.style.height = scrollHeight + 'px';
}

Run Code Online (Sandbox Code Playgroud)

现在在 Ionic4 中唯一改变的是以下声明

@ViewChild('hvUserPost', {static: false}) hvUserPost: ElementRef;

Run Code Online (Sandbox Code Playgroud)

在 Ionic4 中，我收到以下错误。

ERROR TypeError: Cannot read property 'nativeElement' of undefined

Run Code Online (Sandbox Code Playgroud)

所以this.hvUserPost['_elementRef']是未定义的，this.hvUserPost.nativeElement也是未定义的。

html ionic-framework elementref ionic5

Tap*_*jee

lucky-day

4
推荐指数

1
解决办法

6948
查看次数

当值增加时,textarea的高度增加,但当值减小时,textarea的高度不减少

<body>
<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){var h=$(this);
h.height(h[0].scrollHeight);
});});

</script>
<textarea style="resize:none;width:760px;height:60px; overflow:hidden;" ></textarea>
</body>

Run Code Online (Sandbox Code Playgroud)

当textarea溢出时,它会获得滚动条和滚动高度,它会被应用到它的高度,但不能用于降低textarea高度,因为减小它的值长度它不会得到滚动条

html javascript jquery

作者

2012 05-23

3
推荐指数

1
解决办法

2983
查看次数