0

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

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

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

或者也许使用 CSS3？

4

7 回答 7

2

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

于 2013-04-11T09:43:38.470 回答
2

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

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

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

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

演示

于 2013-04-11T11:27:12.617 回答
1 
$(function(){
    $.each($('input'),function(){
    if($(this).val() == '1'){
     $(this).css('color','red');
    }
    });
    });

或者

$('input[value="1"]').css('color','red');
于 2013-04-11T09:43:41.563 回答
1

如果我理解你是正确的，那么每次输入字段的值包含 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/

于 2013-04-11T09:51:14.303 回答
0

尝试值过滤器：

$('input[value=1]')
于 2013-04-11T09:44:36.850 回答
0

尝试这个

$('input:text [value="1"]').css('font-family','Arial')
于 2013-04-11T09:45:11.427 回答
0

通过在页面底部附加以下代码，您将能够更改所有现有输入的样式并观察它们是否有任何更改。如果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);
于 2013-04-11T10:03:50.407 回答