Javascript changer la couleur du texte et du fond à la valeur d'entrée
Je vais utiliser javascript pour faire une fonction pour changer la couleur d'arrière-plan, ainsi que les textes simultanément basée sur la valeur d'un texte d'entrée. J'ai la couleur d'arrière-plan pour changer, mais ne pouvez pas gérer pour obtenir le texte de travail.
function changeBackground() {
//The working function for changing background color.
document.bgColor = document.getElementById("color").value;
//The code I'd like to use for changing the text simultaneously - however it does not work.
document.getElementById("coltext").style.color = document.getElementById("color").value;
}
À la recherche dans le code ci-dessus, le code pour le texte document.getElementById("coltext").style.color = x
fonctionne lorsque je saisie une couleur réelle, et non pas la "couleur" de la valeur.
C'est le html qui de je fais allusion à l' (je sais que c'est horriblement optimisé, mais c'est un travail en cours):
<form id="TheForm" style="margin-left:396px;">
<input id="color" type="text" onchange="changeBackground();" />
<br/><input id="submitColor" value="Submit" type="button" onclick="changeBackground();" style="margin-left:48px; margin-top:5px;" />
</form>
<span id="coltext">This text should have the same color as you put in the text box</span>
Évidemment, et malheureusement, je ne peux pas utiliser le code de cette façon. Mais pas question, je peux essayer, au-delà de cela, j'en arrive à une sorte de complexité infinie. Il devrait être une sorte de moyen facile de résoudre ce problème, droite?
Aussi, vous avez un "onchange" gestionnaire attaché à la zone de texte, et un "onclick" attachés à la touche. Qu'est-ce exactement que vous souhaitez atteindre?
Comme mentionné, le code est un peu de désordre d'un "travail en cours", j'ai essayé de renvoyer à tous les deux et j'ai rarement nettoyer inutile jusqu'à ce que je l'obtenir pour fonctionner. Cependant, gardez à l'esprit que je fais allusion à l'arrière-plan du corps (ce qui n'est pas très clair dans le code, mais encore hors de propos). Mon contenu est blanc.
OriginalL'auteur Holmberg | 2013-05-18
Vous devez vous connecter pour publier un commentaire.
Choses semble un peu confus dans le code dans votre question, alors je vais vous donner un exemple de ce que je pense que vous essayez de faire.
Premières considérations sont sur le mélange de HTML, Javascript et CSS:
Pourquoi utiliser onClick() HTML dans une mauvaise pratique?
Javascript Discret
Styles en ligne vs Classes
Je vais être la suppression du contenu en ligne et de la séparation de ces dans leurs fichiers appropriés.
Prochaine, je vais aller avec l'événement "click" et displose de l'événement "change", comme il n'est pas clair de ce que vous souhaitez ou avez besoin à la fois.
Votre fonction
changeBackground
définit à la fois la couleur du fond et la couleur du texte à la même valeur (votre texte ne sera pas vu), donc je me suis mise en cache de la valeur de la couleur que nous n'avons pas besoin de le chercher dans les DOM à deux reprises.CSS
HTML
Javascript
Sur jsfiddle
Source: w3schools
Mise à jour: comme l'a souligné @Ian
Hex peut être soit 3 ou 6 caractères de long
Source: W3C
Ici est une autre fonction qui va vérifier que votre entrée est valide CSS Hexadécimal de la Couleur, il va définir la couleur du texte seulement ou lancer une alerte si elle n'est pas valide.
Pour les regex tester, je vais utiliser ce modèle
mais si vous les regex correspondance et a voulu casser les nombres en groupes, alors vous auriez besoin d'un modèle différent
Sur jsfiddle
Voici une modification qui permettra couleurs par leur nom avec par hex.
Sur jsfiddle
Donnez-moi une valeur que vous entrez qui ne fonctionne pas.
C'est totalement de ma faute. J'ai oublié de préciser qu'il doit travailler avec des valeurs hexadécimales. Et pour être honnête, je n'ai jamais essayé de la saisie d'ordinaire les couleurs de mon code. Cependant, le contexte accepte les valeurs hexadécimales "ff0000" - par exemple, si le texte ne le fait pas. À quoi cela dépend-il?
Si je rentre "#ff0000" dans la zone de texte et le soumettre ensuite, le fond devient rouge et le texte.
Si vous voulez avoir un valide hex, vous devez utiliser
/^#([0-9a-f]{3})([0-9a-f]{3})?$/i
OriginalL'auteur Xotic750
En fonction de l'événement pour lequel vous voulez utiliser (zone de texte
change
, ou le boutonclick
), vous pouvez essayer ceci:HTML:
JS:
DÉMO: http://jsfiddle.net/6pLUh/
D'un problème mineur avec le bouton a été que c'était un bouton de soumission, dans un formulaire. Lorsque l'utilisateur clique dessus, qui soumet le formulaire (qui se termine juste recharger la page) et de toute modification à partir de JavaScript sont remis à zéro. Juste à l'aide de la
onchange
vous permet de changer la couleur en fonction de l'entrée.Que voulez-vous dire? De quoi êtes-vous fait la saisie? Vous aurez à faire précéder par un "#"
Oui, désolé, cela a fonctionné. L'arrière-plan jamais besoin de moi à l'entrée de la "#". Il semble donc mon code initial fonctionné aussi bien, Cependant j'ai rencontré un autre problème que je pense que c'est dû à quelque chose de totalement autre chose - Le code n'a pas vraiment changer pour la saisie de la couleur, mais seulement clignote, puis revenir à la couleur natif (même si le natif de la couleur n'est pas défini/blanc). Merci beaucoup d'avoir pris de votre temps de toute façon!
Comme je l'ai dit, le bouton sur votre page un bouton "soumettre" à l'intérieur d'un formulaire. Lorsque vous cliquez, il soumet le formulaire - en gros, la page est rechargée et tout est remis à zéro. Le jsFiddle fonctionne car je n'utilise pas un bouton de soumission/forme. Alors, avez-vous réellement besoin de soumettre un formulaire?
+1 pour la coopération, merci 🙂
OriginalL'auteur Ian
OriginalL'auteur Ankit kumar