Question

我有一个输入字段

<input readonly="readonly" step="1" value="0" type="number">

用户将点击屏幕上的数字键盘，数字字段的值将相应更改。

我想要根据值大小（单位数，两位数，三位数）更改字体大小。

我知道你可以选择像

这样的东西

[att=str] :- attribute value is exactly matching to str

[att*=str] :-  attribute value contains str – value can contain str anywhere either in middle or at end.

[att^=str] :- attribute value starting with str

[att$=str] :- attribute value ends with str

这些很不错，但str必须准确才能匹配。有没有办法用正则表达式选择带CSS的元素？类似的东西：

// select input with single-digit value
input[value=\d] { ... }

// select input with double-digit value
input[value=\d\d] { ... }

// select input with triple-digit value
input[value=\d\d\d] { ... }

如果没有，我只会使用类和JavaScript

Answer 1

我不认为您可以使用纯CSS来检查长度并相应地更改字体，您提到如果是这种情况您可以使用JavaScript。您可以检查onchange事件的长度或输入值，并相应地设置字体大小。

＆＃13;

document.getElementById('txt').value = 0

function checkLen(x) {
  if (x.value.length >= 3) {
    x.style.fontSize = '20px'
  } else if (x.value.length >= 2) {
    x.style.fontSize = '14px'
  }
}

function plusOne() {
  var box = document.getElementById('txt')
  box.value++
    checkLen(box)
}

＆＃13;

<input id="txt" onchange="checkLen(this); return false;" readonly="readonly" step="1" type="number"> <input onclick="plusOne(); return false;" type="button">

＆＃13;

使用CSS根据输入值长度选择元素

1 个答案: