Je suis nouveau à jQuery et je veux avoir une boîte de saisie d'un formulaire appelé "largeur" et quand vous tapez une valeur (disons "300"), il mettra instantanément à jour le div "#box" à une largeur de 300px.Jquery: Mise à jour css à partir d'une entrée de formulaire
Merci!
$("#txt1").bind("keypress", function(){
var val = parseInt($(this).val(), 10);
$("#box").css({'width': val + 'px'});
});
One way:
jQuery("#input").change(function(){
jQuery("#box").css("width", jQuery("#input").val()); });
Fondamentalement, lorsque la valeur d'entrée change, définir l'attribut css de #box pour utiliser la largeur d'entrée.
$("textbox").blur(function() {
$("#box").css("width") = $("textbox").val();
});
// blur is triggered when the focus is lost
$("#my_input_field_id").blur(function() {
var newWidth = $(this).text();
$("#box").width(newWidth); // the width function assumes pixels
// alternately, use .css('width', newWidth);
});
Si vous voulez que cela fonctionne comme les types d'utilisateurs (donc s'ils tapent 500, il met à jour le 5 à 5, 50 quand 0 est ajouté, puis 500 sur le 0 final), puis associez à l'événement de pression de touche.
Question de curiosité - pourquoi parseInt? Juste pour assurer la coédition de type? – justkt
Un moyen de faire fonctionner ce script lorsque la valeur est saisie? J'ai un curseur connecté à la boîte d'entrée de largeur ainsi quand le curseur a changé la valeur, je veux que la #box change en même temps. – floatleft
@Chat Whitaker - Cette réponse devrait faire cela. C'est contraignant pour keypress. Vous pouvez également lier via $ ("# txt1"). Keypress (function() {...}); Les docs de jQuery jave plus d'information http://api.jquery.com/keypress/. – justkt