Ändern der Farbe von Platzhaltertext im Fokus mit JavaScript

Ich versuche, die Farbe von Platzhaltertext auf weiß im Fokus zu ändern. Sie können das Kontaktformular here.Ändern der Farbe von Platzhaltertext im Fokus mit JavaScript

Ich habe verschiedene CSS-Code ausprobiert, aber der Großteil des Codes sieht nicht gleich auf verschiedenen Browsern + Ich habe einige Nachforschungen gemacht, und ich kann jetzt sehen, dass es einige Grenzen sind wenn es darum geht, die Platzhalter mit CSS zu gestalten.

Meine Frage ist, kann ich die Platzhalterfarbe auf Weiß im Fokus mit JavaScript ändern? Ich bin nicht so vertraut mit JavaScript zu schreiben, würde aber jede Hilfe dankbar

Quelle

2015-10-22 NohmanJ

Glauben Sie Anbieter Präfixe müssen (Von css-tricks.com):

::-webkit-input-placeholder { 
    color: red; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    color: red; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    color: red; 
} 

:-ms-input-placeholder { 
    color: red; 
}

mit JavaScript Sie würde nur ähnlich Styling anwenden (Vendor-Präfixe verwenden) programmatisch auf ein Fokus-Ereignis.

Bearbeiten: In der Tat diese Stile, die ich glaube nicht, kann mit Javascript angewendet werden. Sie müssten eine Klasse erstellen und diese mit js anwenden.

CSS:

input.placeholderred::-webkit-input-placeholder { 
    color: red; 
}

JQuery:

var $textInput = $('#TextField1'); 
$textInput.on('focusin', 
    function() { 
     $(this).addClass('placeholderred'); 
    } 
); 

$textInput.on('focusout', 
    function() { 
     $(this).removeClass('placeholderred'); 
    } 
);

JS:

var textInput = document.getElementById('TextField1'); 
textInput.addEventListener('focus', 
    function() { 
     this.classList.add('placeholderred'); 
    } 
); 

textInput.addEventListener('blur', 
    function() { 
     this.classList.remove('placeholderred'); 
    } 
);

Und mit freundlicher Genehmigung des am nützlichsten, Armfoot, eine Geige: http://jsfiddle.net/qbkkabra/2/

Quelle

2015-10-22 16:32:32 AtheistP3ace

Hey, zumindest Zitat [CSS-Tricks] (https://css-tricks.com/snippets/css/ style-placeholder-text /), wenn Sie ihren Code kopieren und einfügen: P Die OPs fragen ausdrücklich, ob sie den Fokus ändern sollen, und geben Sie an, wie Sie diese Klasse verwenden, um dies zu tun? Er benutzt auch jQuery, wenn du damit besser vertraut bist ... – Armfoot

Entschuldigung, ich habe nicht versucht, es zu stehlen. Ich habe nur die genauen Präfixe vergessen, also kopierte es. Ich werde die Antwort aktualisieren, indem ich ein Ereignis anhefte. – AtheistP3ace

Hinzugefügt pure JS und jquery – AtheistP3ace

Dieser Wille arbeiten wi th nur CSS und HTML

CSS

input::-webkit-input-placeholder { 
color: #999; 
} 
input:focus::-webkit-input-placeholder { 
color: red; 
} 

/* Firefox < 19 */ 
input:-moz-placeholder { 
color: #999; 
} 
input:focus:-moz-placeholder { 
color: red; 
} 

/* Firefox > 19 */ 
input::-moz-placeholder { 
color: #999; 
} 
input:focus::-moz-placeholder { 
color: red; 
} 

/* Internet Explorer 10 */ 
input:-ms-input-placeholder { 
color: #999; 
} 
input:focus:-ms-input-placeholder { 
color: red; 
}

und html

<input type='text' placeholder='Enter text' />

Quelle

2015-10-22 16:53:04 kfreeman04208

Ändern der Farbe von Platzhaltertext im Fokus mit JavaScript

Antwort

Verwandte Themen