1

我有一个像这样的输入元素：

<input value="hello world" class="my-input"/>

但是在 UI 中我只想显示没有 'world' 的 'hello' （也就是说，我想显示值的前 5 个字母）

我有可能使用 my-input 类实现这一点吗？我应该怎么做？

谢谢

4

4 回答 4

2

你不能纯粹在 CSS 中做到这一点，但使用 jQuery 相当简单：

var myInputVal = $(".my-input").val();
$(".my-input").val(myInputVal.substr(0, 5));

见演示。

如果需要保留输入的原始值（这样在提交表单时，它发送的是“hello world”而不是“hello”），可以使用 HTML 数据属性来“存储”原始值，然后提交表单时检索它，如下所示：

var myInput = $(".my-input");
var myInputVal = myInput.val();

myInput.data("original-value", myInputVal);
myInput.val(myInputVal.substr(0, 5));

$("form").submit(function(e) {
  e.preventDefault();
  myInput.val(myInput.data("original-value"));
  $(this).submit();
});
于 2013-03-14T21:03:01.883 回答
1

这是一个纯 CSS 解决方案

HTML:
<input value="1234567890" class="my-input" />

CSS:
input {
    font-family: monospace;
    font-size: 1em;
    width: 3.2em;
    padding: 0;
}

使用width以em单位表示但：

  • 你必须使用等宽字体（或者 anm会大于 an i）
  • 1em等于用户最终将在其系统中看到的特定等宽字体的高度，而不是宽度。M在我当前的 Windows Vista 中，我使用默认等宽设置了 3.2em 的宽度，但您的里程可能会有所不同。

因此，您必须特别谨慎地选择您选择的字体集，并在各种 Windows 操作系统（XP、Vista、Win7 和 Win8 都安装了它们的特定字体）上进行测试，这也取决于是否安装了 MS Office 和 Adob​​e Reader，如果是 web设计师/开发人员是目标，Visual thing 和 Creative 等工具）、OS X 和 Linux 风格。和手机。或者您可以从font-family下载的字体开始@font-face，然后继续在每个操作系统上使用具有相似宽度的字体...

如果 CSS 被用户禁用或自定义，那是失败的，所以你不应该依赖输入的宽度来传达意义或做某种技巧。这还不够健壮（盲人用户显然既不关心也不认为您的输入在视觉上仅限于显示 5 个字符，但仍包含更多字符）。

于 2013-03-14T22:20:38.277 回答
0

我认为仅使用 CSS 是不可能做到这一点的。您可以使用 maxlength HTML 属性或在 JavaScript 中执行某些操作。我意识到这不是你要的，但我认为这是不可能的。

于 2013-03-14T21:07:37.847 回答
0

有一个新的 HTML5 属性maxlength可以限制输入中的字符数。( jsFiddle )

<input value="hello" class="my-input" maxlength="5" />

显然对此的支持非常好。

如果您的意思是要保留有关原始字符串“hello world”的信息，则需要使用 JavaScript，纯粹使用 CSS 无法实现。width您可以通过使用/属性来接近，overflow但它会因设备而异。

于 2013-03-14T21:08:26.873 回答