So ändern Sie den CSS-Stil über die benötigten Formularfelder basierend auf Ihren Werten

Ich würde gerne wissen, wie zu schreiben der javascript-Code ändern, der Stil der form, Elemente, die notwendig sind; und ändern Sie Sie, wenn Sie Werte in Ihnen.

Was ich tun will, ist haben einen farbigen Rahmen um die gewünschten text-Felder, wenn Sie leer sind, und entfernen Sie die Grenze Stil, wenn Sie Werte haben.

was ich gedacht habe zu tun, ist das schreiben einer einzigen javascript-Funktion, die überprüft, ob der Wert leer ist, und setzen Sie den entsprechenden Stil:

function requiredElement(id) {
  var Input = document.getElementById(id);
  if(Input.value==null) {
    Input.style.border = '2px solid #FF0000';
  }
}

Aber was ich stecken geblieben bin, ist das ändern der Stil als Benutzer/löscht Zeichen in diese erforderlichen Felder aus, und rufen Sie die Funktion für die Felder.

Habe ich ein einfaches html-Formular, jeder Eingang hat eine eindeutige ID.

  • Es hat nicht funktioniert für Sie?
InformationsquelleAutor Ben Ashton | 2012-09-26
  1. 1

    JQuery

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

    Fügen Sie dann diesen code:

    $('.important').change(function() {
  if(($(this).val()) != '') $(this).css( 'border-width', '0' );
  else  $(this).css( 'border-width', '2' );
});

    Angenommen, Sie Hinzugefügt eine Grenze in der css -

    .important
{
    border-style:solid;
    border-width:2px;
    border-color:red;
}
    InformationsquelleAutor peppydip
  2. 1

    Um zu bestimmen, wenn das element den Wert ändert, binden Sie Ihre benutzerdefinierte Funktion, um die onchange und onkeypress Veranstaltungen (oder in jQuery, binden .ändern Sie() und .keypress()).

    Tatsächlich ändern Sie das Aussehen des Elements, Es ist am besten zu definieren, die styles in eine CSS-Klasse, und verwenden Sie JavaScript zum hinzufügen/entfernen von der Klasse als angemessen.

    Ändern Sie können ein HTML-element die CSS-Klassen per JavaScript so:

    element = document.getElementById("myElement");
element.className = "invalid";

    Oder, jQuery, verwenden Sie die .addClass() Funktion:

    $("#myElement").addClass("invalid");

    HTML:

    <input id="something" name="something" type="text" class="inputClass"
    onchange="requireElement(this)"
    onkeypress="requireElement(this)" />

    JavaScript:

    function requireElement(element) {
    if(element.value == null)
        element.className = "inputClass invalid";
    else
        element.className = "inputClass";
}
    InformationsquelleAutor quietmint
Schreibe einen Kommentar