如何在metabox中修改<textarea>字段的大小:行高和滚动控件?

时间:2016-06-16 作者:ijason

我被无法找到一种方法来对textarea 在我的自定义元数据库中。

查看默认的Wordpress Post Admin屏幕,标签元框是一个单行字段,大小正好可以容纳一行字符。如果可用空间过满,它会向右滚动。无需调整大小,无需滚动条。

我不能在我自己的习惯中复制这个textarea 字段,在我的metabox中。

无论字体大小如何,我的字段都比填充文本高约30%。当获得可用的水平空间时,它们会垂直滚动。

我更喜欢尺寸textarea 通过cols="X" rows="Y" 方法,但无法找到有关如何为行高度指定值的任何文档。

调整线条高度并不能解决问题:当我将线条高度降低到足以影响textarea, 字体对齐不好,在我的多行字段中重叠。

我在网上找到的唯一控制textarea 是通过CSS操纵如何处理溢出。但必须有更好的方法来调整这一点。

1 个回复
最合适的回答,由SO网友:Luis Sanz 整理而成

Textareas的行为与浏览器渲染引擎中的文本输入完全不同。我无法理解没有滚动条的单行textarea的用例。如果要将默认文本输入行为复制到所有效果,那么使用简单的input type="text" 而不是自定义字段?

如果要保留textarea多行功能,但不希望在用户未明确执行此操作的情况下断行,请添加white-space: nowrap; 按照它的风格做就行了。overflow: auto; 在管理屏幕中已经是WordPress的默认属性,因此无需重复声明。然而,我不建议您这样做,因为这会恶化文本的可读性,而且从手持设备使用它是一场噩梦。

我认为在仪表板中处理表单元素样式的最简单方法是避免使用自定义css。WordPress的默认样式在屏幕和设备上是一致的。在添加一些额外的css属性之前,我会问自己是否真的需要为我的metabox设置不同的行为。

如果答案是肯定的,那么,当然,有一些属性是可以安全使用的。对于textarea维度,我将使用以下内容:

高度:使用html属性rows="x" 或在中声明em 样式表中的单位% 或者,使用一些默认类,例如large-textwide-fat.