更改僅包含“ 1”的所有輸入字段的樣式

Question

我在我的網站上使用一種樣式，它有一個缺陷：數字“ 1”看起來完全像一個大的“ I”和一個小的“ L”。

如何使用javascript動態更改所有只包含數字“ 1”作為值的輸入字段的字體樣式，而不必更改該站點上的所有表格？

（無論如何，我在該網站上經常使用jquery）

也許使用CSS3？

Answer 1

只需更改用於所有輸入框的字體系列。 您不希望它在字段之間有所不同，這看起來很奇怪

Answer 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);
}

現在，您只需要確保有一個名為input-value-1的CSS類即可覆蓋默認樣式。

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

演示版

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);