javascript - 更改仅包含 "1"的所有输入字段的样式

Question

我在我的网站上使用了一种样式，它有一个缺陷:数字“1”看起来就像一个大“I”和一个小“L”。

如何使用 javascript 动态更改所有仅包含数字“1”作为值的输入字段的字体样式，而无需更改该站点上的所有表单？

(我在那个网站上经常使用 jquery)

或者可能使用 CSS3？

Answer 1

我写了我的评论“你打算让样式随着值的变化而来回变化吗”作为一个反问来说明这种方法的笨拙，但如果那真的是你想要的，当然。

首先，您需要确保样式在 DOMReady 时设置一次，并且每次输入更改时设置一次。

$(function() { 
    $(':text')
        .each(setInputStyle)
        .change(setInputStyle);
});

然后您需要确保 setInputStyle 检查您要检查的内容。我不确定您是要更改所有包含 1 的输入还是仅更改恰好 1 的输入。您将使用以下检查之一:

• 包含:

  var inputValue1 = this.value.indexOf('1') >= 0;
  

• 完全匹配

  var inputValue1 = this.value == '1';
  

• 或者，“只包含一个”:

  var inputValue1 = /^1+$/.test(this.value);
  

无论您寻找什么，您都可以像这样将其合并到您的函数中:

function setInputStyle() {
    var inputValue1 = this.value == '1'; // or something else
    $(this).toggleClass('input-value-1', inputValue1);
}

现在您只需要确保有一个名为 input-value-1 的 CSS 类可以覆盖默认样式。

.input-value-1 { font-family: verdana; }

Demo