相关疑难解决方法(0)

还有另外一个关于这个问题,我试过了.但是有一个问题: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 ) …

我正在尝试使用jQuery计算文本宽度.我不确定是什么,但我肯定做错了什么.

所以,这是代码:

var c = $('.calltoaction');

var cTxt = c.text();

var cWidth =  cTxt.outerWidth();

c.css('width' , cWidth);

例子http://dabblet.com/gist/5859946

如果您有一个长占位符,默认情况下输入的宽度不足以显示所有占位符文本.

例如

<input placeholder="Please enter your name, address and shoe size">

如果没有设置固定宽度,最好没有javascript,您可以设置输入以显示所有占位符文本吗？

我有满足感的div如下所示.

<div style=" border:solid 1px #D31444" contenteditable="true">12 some text...</div>

我需要的是,当我点击div时,所有文本将自动被选中.你能给我解决方案吗？

我想要一个宽度适应其内容的输入。

我正在尝试实现类似问题的答案，但使用 React：

import React, { useState } from 'react';

export default () => {
  const [content, setContent] = useState('');
  const [width, setWidth] = useState(0);

  const changeHandler = evt => {
    setContent(evt.target.value);
  };

  return (
    <wrapper>
      <span id="hide">{content}</span>
      <input type="text" autoFocus style={{ width }} onChange={changeHandler} />
    </wrapper>
  );
};

问题是我不知道如何查询跨度的宽度，以便更改输入的宽度（使用setWidth）。

我怎样才能实现这个目标？

默认情况下,input元素是size ="20",如果没有内联定义或者CSS样式规则归因于它.

如何使默认值的实际大小？对于其他元素:

<div style="display: inline; width: auto;">
    The box will only fit the width of it's content
</div>

width:auto就是你所需要的.我不能放置一个定义的宽度,因为该值可能更长.例如:

<input id="short" type="text" value="1000" />
<input id="long" type="text" value=" Areally long name is in this input field." />

我希望#short的大小为1000(基本上大小="4"+填充),但#long只要需要.这些输入是以编程方式进行的,所以我不能简单地在我想要的短片上写一个简短的课程,而在我想要的那个片段上放一个长课.我真的很喜欢它,如果我可以把:

input { width: auto; }

无论如何要做到这一点？

Apple的MobileMe使用javascript在用户输入时更改其主页上电子邮件登录中的字体大小,以便文本始终适合可用空间而不会溢出滚动.

虽然我可以看到如何在每个按键上执行一个函数,但我很好奇每次如何调整字体大小以便它总是适合输入字段.有没有办法用可变宽度字体来测量一段文本的长度？他们如何实现这种效果？

试试看我的意思:http: //www.me.com/

我正在尝试创建一个input字段，该字段的宽度至少会随着用户输入的字符串长度（甚至可能是多行）而动态扩展。inputAngular Material 2 中的元素可以实现吗？

使用textareaAngular Material 2 中的字段，我只能使用以下代码扩展 textarea 的高度，而不是宽度：

<mat-form-field (keydown.enter)="onEnter()" 
                floatPlaceholder="never">
  <textarea matInput 
            placeholder="Autosize textarea" 
            matTextareaAutosize
            matAutosizeMinRows="1" 
            matAutosizeMaxRows="8">
  </textarea>
</mat-form-field>

也在 StackBlitz 上。

在的情况下textarea的scrollbar应该是不可见或通过一个较小的一个替代。最重要的按下Enter不应该创建一个新行，而应该只触发一个动作。

我.css()用来从元素中获取样式.但在Firefox .css()中没有得到的价值margin,并padding从元素.

请看小提琴:http: //jsfiddle.net/howtoplease/fMTsW/

这是我的jquery代码:

$(document).ready(function(){
    $('input').each(function(){
        this.value = $('h3').css(this.name);
    });
});

我的HTML代码

<h3 style="margin:20px;padding:20px;font-size:30px;font-family:'open sans';">
    I am heading 3
</h3>

<input name="margin" />
<input name="padding" />
<input name="font-size" />
<input name="font-family" />

拿这里的代码:

<p>Lorem ipsum <input type="text" value="algo" /> dolor sit ...</p>

示例:http://codepen.io/dbugger/pen/KrAmPx

如何使输入看起来像段落内的完全正常的文本？我把它设置为display: inline但宽度似乎仍然固定.

我有一个<input type="text" />标签.

内容可能太多,当内容长度超过输入宽度时,它将水平滚动.

实际上,我想控制标签的宽度,使其根据内容而变化.

那么,有没有办法获得标签的内容宽度？与scrollHeight属性相似？

min-content并且max-content似乎不关心输入元素的值：

input {
  border: 1px solid black;
  width: min-content;
}

<input type="text">

CSS 在计算最小内容时完全忽略输入的值，只使用一些默认宽度，无论内容如何，​​它都不会改变：

如何使 CSS 考虑“内容”（值）宽度：

不使用 javascript 来设置width，min-width或者max-width