Tengo un campo de entrada que tiene por defecto un valor añadido con JavaScript

<input type="text" class="input-text required-entry validate-value-eg" id="city_field" name="city" onfocus="if(this.value=='e.g. Bristol, Yorkshire') this.value='';" onblur="if(this.value=='') this.value='e.g. Bristol, Yorkshire';" value="e.g. Bristol, Yorkshire">

Cuando el visitante haga clic en este campo el valor predeterminado se disipa y restaurar si no se sustituye por otro valor.

Lo que estoy tratando de lograr es agregar una clase sólo si el valor ha cambiado de forma predeterminada?

Cualquier ayuda muy apreciada,

Gracias

Dom

  • ¿Sabe usted cómo agregar/quitar una clase a un elemento?
  • Por desgracia, yo no sé mucho acerca de JavaScript.
InformationsquelleAutor Dom | 2012-11-20

3 Comentarios

  1. 2

    Siempre es una mejor práctica para definir sus eventos en la sección de secuencia de comandos o una por separado .archivo js.

    Usted no necesita controlar que en un .change() evento . Se puede comprobar que en la .blur() evento en sí..

    HTML

        <input type="text" class="input-text required-entry validate-value-eg" 
               id="city_field" name="city" value="e.g. Bristol, Yorkshire">

    Javascript Puro

    var elem = document.getElementById('city_field');
    
    elem.addEventListener('focus', function() {
        if (this.value == 'e.g. Bristol, Yorkshire') {
            this.value = '';
        }
    });
    
    elem.addEventListener('blur', function() {
        if (this.value == 'e.g. Bristol, Yorkshire') {
            RemoveClass(this, "newClass")
        }
        else if (this.value == '') {
            this.value = 'e.g. Bristol, Yorkshire';
            RemoveClass(this, "newClass")
        }
        else {
            this.className += " newClass";
        }
    });
    
    function RemoveClass(elem, newClass) {
        elem.className = elem.className.replace(/(?:^|\s)newClass(?!\S)/g, '')
    }​

    Javascript Violín

    Pero usted puede lograr esto con una pérdida menor de código mediante el uso de otros frameworks de javascript.
    Esto le hará la vida mucho más fácil, pero siempre es bueno si usted comienza con javascript.

    jQuery

    $(function() {
        var $elem = $('#city_field');
    
        $elem.val('e.g.Bristol, Yorkshire'); //Default value
        $elem.on('focus', function() { //Focus event
            if (this.value == 'e.g.Bristol, Yorkshire') {
                this.value = '';
            }
        });
        $elem.on('blur', function() { //Focus event
            if (this.value == 'e.g.Bristol, Yorkshire') {
                $(this).removeClass("newClass");
            }
            else if (this.value == '') {
                this.value = 'e.g.Bristol, Yorkshire';
                $(this).removeClass("newClass");
            }
            else {
                $(this).addClass("newClass");
            }
        });
    });​

    jQuery Violín

  2. 1

    Agregar un onchange controlador de entrada

    <input type="text" class="input-text required-entry validate-value-eg" 
        id="city_field" name="city" 
        onchange="addClass(this)" 
        onfocus="if(this.value=='e.g. Bristol, Yorkshire') this.value='';" 
        onblur="if(this.value=='') this.value='e.g. Bristol, Yorkshire';" 
        value="e.g. Bristol, Yorkshire">
    
    
    <script>
     function addClass(input) //'this' in onChange argument is the input element
     {
         if( input.value=='e.g. Bristol, Yorkshire')
         {
            $(input).removeClass("not_default_input_class");
            $(input).addClass("default_input_class");
         }
         else 
         {
            $(input).removeClass("default_input_class");
            $(input).addClass("not_default_input_class");
         }
     }
    </script>

    EDIT: Añadido el uso de jQuery para agregar/quitar clases CSS

    • No es lo que ustedes ven que el jQuery etiqueta no está presente para esta pregunta en particular..
    • Sí, lo hice y usted puede escribir su propio addClass/removeClass, pero ¿por qué reinventar ese? No ve usted que la pregunta no dice «no se debe usar jQuery»?
  3. 0
     <script>
     function addClass(input) //'this' in onChange argument is the input element
    {
     input.className = input.value==input.defaultValue? 
         "default_input_class" : "not_default_input_class"
    }
    </script>   
    • Copió mi respuesta anterior? No ve usted el problema?
    • oops lo siento, sólo quiero mencionar el entrada.defaultValue Es allí cualquier probs
    • En realidad, puedo ver al mérito en el relleno de un defaultValue en una costumbre de los datos de atributo (pero tal vez igual de fácil para crear un var JS, algo que se llama defaultSettings, que almacena la configuración predeterminada para todas las entradas en la página? De esa manera, no estás repitiendo defaultValues por todo el lugar ( en JS validación de + valores HTML + HTML atributos personalizados)

Dejar respuesta

Please enter your comment!
Please enter your name here