Hinzufügen einer Css-Klasse für alle <input type'text'> - Elemente? Javascript / Css?

Ich möchte eine CSS-Klasse zu jeder textbox in meiner Website:

        <div class="editor-label">
            <label for="FoodType">FoodType</label>
        </div>
        <div class="editor-field">
            <input id="HelpText" name="FoodType" type="text" value="" />
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>

Und ich dachte, Hey! Einfach. Füge ich eine jquery-Funktion, Sie alle zu finden in der masterpage.

<script type="text/javascript">
    $(document).ready(function(){
        $('input').addClass('textbox');
    }
</script>

Leider wird diese auch wählen Sie die Schaltfläche senden. Wie kann ich nur wählen Sie die input Elemente, die einen text type-Attribut?

Alternativ ist das möglich, mit ganz CSS?

Wenn diese beiden Methoden nicht möglich sind, ich denke, ich werde nur müssen Sie manuell fügen Sie die Klasse, um jede textbox ich machen?

InformationsquelleAutor 4imble | 2010-05-14
  1. 24

    AFAIK ist es:

    $('input[type=text]').addClass('textbox');

    Ist, und Sie können ähnlich wie in der CSS-Datei, aber das erfordert eine höhere version von CSS /je nachdem, wie breit Sie wollen, um mit älteren Browsern.

    Siehe Attribut-Selektoren in hier. Beachten Sie, dass:

    "Browser-Unterstützung: der einzige browser, Der nicht unterstützt CSS3 Attribut-Selektoren ist der IE6. Sowohl IE7 und IE8, Opera und der Webkit - und Gecko-basierten Browsern funktionieren. So verwenden Sie in Ihrem Stylesheet ist auf jeden Fall sicher."

    • Ausgezeichnet, vielen Dank.
    • $('input[type=text]') funktioniert im IE6, weil jQuery zurückgreifen, um mit seinen eigenen selector-engine, anstatt der browser eine integrierte Unterstützung. input[type=text] { ... } in einem CSS-stylesheet, auf der anderen Seite, würde nicht in IE6.
    • die kanonische Lösung wäre das Parsen von HTML mit RegEx denke ich
    InformationsquelleAutor eglasius
  2. -1
    <!DOCTYPE html>

<html>
<head>

<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>


<script type="text/javascript">
$(document).ready(function(){

$(".post_class").css({padding:"10px",background:"#333",color:"#fff"});

$("#post_button").css({padding:"10px",background:"#333", textAlign:"center",color:"#fff",cursor:"pointer"})

$("#post_button").click(function(){
var input = $("input[name='checkListItem']").val();

$(".post_class").append('<div class="item">' + input + '</div>');

});

});
</script>


</head>

<body>

<form name="checkListForm">

<input type="text" name="checkListItem"/>

</form>

<div id="post_button">Post</div>

<br/>

<div class="post_class"></div>

</body>

</html>
    • Dies beantwortet nicht die Frage an alle warum also ist dieses hier gepostet?
    InformationsquelleAutor Sahil Jain
Schreibe einen Kommentar