相关疑难解决方法(0)
使用JavaScript计算文本宽度
我想用JavaScript来计算字符串的宽度.这是否可以在不使用等宽字体的情况下实现？
如果它不是内置的,我唯一的想法是为每个字符创建一个宽度表,但这是非常不合理的,特别是支持Unicode和不同的类型大小(以及所有浏览器).
推荐指数
解决办法
查看次数
使用自动调整大小创建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 ) …推荐指数
解决办法
查看次数
无需渲染即可测量文本宽度/高度
有没有办法在不渲染实际元素的情况下估算文本宽度？像canvas TextMetrics这样的东西？
案例:我需要估算ReactList的元素高度.要做到这一点,我需要大致知道文本元素需要多少空间(或者它们将跨越多少行).
例如.
render(){
return <div><SomeComponentWithKnownDims/><p>{this.props.someText}</p></div>;
}
如果我知道someText会被渲染到一条线上有多宽以及线条的长度,我可以很容易地得出一个合适的元件高度估计值.
编辑:请注意,这是非常重要的性能,不应该触及DOM
推荐指数
解决办法
查看次数
在 React 中自动缩放输入值的宽度
我想要一个宽度适应其内容的输入。
我正在尝试实现类似问题的答案，但使用 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）。
我怎样才能实现这个目标？
推荐指数
解决办法
查看次数
将javascript计算样式从一个元素设置为另一个元素
所以我试图复制适用于一个元素的所有样式(class/id/tagName/attribute等).到目前为止,我发现我可以复制元素的计算样式,只有一个问题... couldend将它应用于其他元素; /
或diffrend复制所有样式的方法.
(这是我得到的:/) http://jsfiddle.net/8KdJd/2/
//queriks mode + minor changes to retrive the computed style
function getCS(el)
{
if (el.currentStyle)
var y = el.currentStyle;
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(el,null);
return y;
}
function setCS(el,cs)
{
if (el.currentStyle)
{
el.currentStyle = cs;
el.style = cs;
}
else if (window.getComputedStyle)
{el.style = cs
}
}
var myLink = document.getElementById('myLink');
var anotherLink = document.getElementById('anotherLink');
var CS_myLink = getCS(myLink);
setCS(anotherLink,CS_myLink);
推荐指数
解决办法
查看次数
动态调整HTML文本输入宽度到内容
我不能在这方面找到一个明确的答案,如果有一个我错过了,请原谅.
我希望我的文本输入宽度自动调整到其中的内容大小.首先使用占位符文本而不是某人输入的实际文本.
我已经创建了以下作为示例.目前,这些盒子比我的占位符文本大得多,造成了大量的空白区域,当我输入内容时,这显然是同样的事情.
我尝试过宽度自动,一些jQuery,以及我在互联网上找到的麻线和泡泡糖.但还没有任何工作.有什么想法吗？谢谢!
HTML:
<span><p>Hello, my name is </p></span>
<span><input type="text" id="input" class="form" placeholder="name"></span>
<span><p>. I am </p></span>
<span><input type="text" id="input" class="form" placeholder="age"></span>
<span><p> years old.</p></span>
CSS:
.form {
border: 0;
text-align: center;
outline: none;
}
span {
display: inline-block;
}
p {
font-family: arial;
}
推荐指数
解决办法
查看次数
Material-UI TextField 宽度可以设置为匹配输入文本的宽度吗？
是否可以让 Material-UI 自动调整 TextField 元素的宽度以匹配输入文本的宽度？
我正在创建一个表单视图/编辑页面，并将数据渲染回相同的字段，但是服务器还设置了一系列参数。如果能够在禁用的表单元素中进行渲染并自动调整其宽度，那就太好了。
我已经正确调整了 TextField 和底层输入的宽度，但没有成功。我可以在 JS 中计算字符数并设置宽度，但我更喜欢 CSS 解决方案。
<TextField
disabled={true}
label={"UUID"}
value={"7be093a5647d41ff8d958928b63d11f5"}
style={{width: "auto"}}
InputProps={{
style: {width: "100%"}
}}
/>
推荐指数
解决办法
查看次数
滚动宽度总是返回未定义
我正在做一些程序，当它检测到文本框中的输入更改时，它需要做一些事情。但这对我不起作用。所以我更改我开始在控制台中给出值以验证它每当它检测到输入更改时它总是返回undefined。如何获取用户输入的文本大小（以像素为单位）？
<!doctype html>
<html>
<head>
<style>
input[type=text] {
height: 20px;
width: 100px;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<input type="text" id="func"></input>
</body>
<script>
$("#func").change(function () {
console.log($("func").scrollWidth);
});
</script>
</html>
推荐指数
解决办法
查看次数
输入大小与字母间距
一个 input 元素可以有一个“size”属性，它决定了它的宽度可以容纳多少个字符，这在某些类型的输入的字符数是固定的情况下是一个很好的特性。例如电话号码、信用卡号码、客户 ID 号码等。在这种情况下，将“大小”属性放在输入字段上比深入样式表并为每个字段定义宽度更方便。
但是，在放置 size 属性时，它不考虑字母间距。如果我希望我的数字更加分散，它们会溢出输入宽度。有什么方法可以指定输入字段的大小，同时考虑到字母间距和可能影响文本大小的其他因素？
HTML：
<input size="5" placeholder="#####"/>
CSS：
input { letter-spacing: 1em }
有关输出，请参阅此JSFiddle。请注意，占位符文本会溢出输入字段。
推荐指数
解决办法
查看次数
使<input>看起来像段落中的普通文本
拿这里的代码:
<p>Lorem ipsum <input type="text" value="algo" /> dolor sit ...</p>
示例:http://codepen.io/dbugger/pen/KrAmPx
如何使输入看起来像段落内的完全正常的文本？我把它设置为display: inline但宽度似乎仍然固定.
推荐指数
解决办法
查看次数
输入元素内容的 CSS 宽度。min-content 不适用于输入
min-content并且max-content似乎不关心输入元素的值：
input {
border: 1px solid black;
width: min-content;
}<input type="text">CSS 在计算最小内容时完全忽略输入的值，只使用一些默认宽度，无论内容如何，它都不会改变：
如何使 CSS 考虑“内容”（值）宽度：
不使用 javascript 来设置width，min-width或者max-width
推荐指数
解决办法
查看次数