Question

我在我的网站上使用了一种风格，它有一个缺点：数字“1”看起来就像一个大的“我”，就像一个小的“L”。

如何使用javascript动态更改所有输入字段的字体样式，只包含数字“1”，而不必更改该网站上的所有表单？

（无论如何我在那个网站上使用jquery）

或者也许使用CSS3？

Answer 1

只需更改用于所有输入框的字体系列。你不希望它在字段之间有所不同，这看起来很奇怪

Answer 2

我写了一篇评论“你是否打算让风格随着价值的变化来回变换”作为一个修辞问题来说明这种方法的笨拙，但如果这真的是你想要的，那么肯定。 / p>

首先，您需要确保在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

Answer 3

$(function(){
    $.each($('input'),function(){
    if($(this).val() == '1'){
     $(this).css('color','red');
    }
    });
    });

或

$('input[value="1"]').css('color','red');

Answer 4

如果我理解你是正确的，那么每当输入字段的值包含1时，你想要一个不同的字体。

这适用于值“1”和“abc de 1 fg”

<强> JS

$('input[value*="1"]').css({'font-family':'Helvetica','color':'#990000'});

在这里查看： http://jsfiddle.net/U3weP/1/

要使其特定于值1，只需删除选择器中的*。

<强> JS

$('input[value="1"]').css({'font-family':'Helvetica','color':'#990000'});

要在键入时进行更改，您可以使用以下功能，它也会更改回正常状态。

<强> HTML

<input type="text" name="test1" value="1" />
<input type="text" name="test2" value="2" />
<input type="text" name="test3" value="3" />
<input type="text" name="test4" value="abc 1 def" />

<强> CSS

.different {
    font-family:'Helvetica';
    color:#990000;
}

<强> JS

$('input').on('keyup',function() {
    if($(this).val().indexOf('1') != -1) {
        if(!$(this).hasClass('different')) {
            $(this).addClass('different');
        }
    } else {
        $(this).removeClass('different');
    }
}).trigger('keyup');

查看小提琴http://jsfiddle.net/U3weP/4/

Answer 5

尝试值过滤器：

$('input[value=1]')

Answer 6

试试这个

$('input:text [value="1"]').css('font-family','Arial')

Answer 7

如果在页面底部附加了以下代码，您将能够更改所有现有输入的样式并观察它们是否有任何更改。如果1将出现在任何输入中，someclass将添加到该元素中。如果1将被删除，那么该课程将会被删除。

function onCharacter1Found() {
  var field = $(this),
      classname = "someclass",
      containsChar_1 = field.val().indexOf(1) > 1;
  if(containsChar_1) { 
    field.addClass(classname);
  } else {
    field.removeClass(classname);
  }
};

// update all existing inputs on the page
$("input").each(onCharacter1Found);

// watch for changes
$("input").bind("input", onCharacter1Found);

更改仅包含“1”的所有输入字段的样式

7 个答案: