Supposons que j'ai un élément d'entrée, dans mon code html, de type number et deux boutons:
let inputField = document.getElementById(id); inputField[0].arrowUp.click(); inputField[0].arrowDown.click();
<input type="number" id="inputFieldId" min="1" max="10" value="10">
<input type="button" id="downButton" onclick="downFunction('inputFieldId')" value="-"/>
<input type="button" id="upButton" onclick="upFunction('inputFieldId')" value="+" />
Il est possible d'incrémenter / décrémenter la valeur de inputFieldId en utilisant javascript, ou éventuellement jQuery, respectivement en cliquant sur upButton et downButton code>?
Je ne veux pas dire obtenir la valeur actuelle du champ et réinitialiser la nouvelle valeur après avoir fait ++ ou - opérations.
Je veux dire en cliquant directement sur les boutons fléchés.
Pour mieux comprendre, faire quelque chose de similaire à ceci:
function downFunction(id) {
let inputField = document.getElementById(id);
// How to increment the value?
log("Log from downFunction", inputField)
}
function upFunction(id) {
let inputField = document.getElementById(id);
// How to decrement the value?
log("Log from upFunction", inputField)
}
function log(message, element) {
console.log(message);
console.log(element);
console.log("\n");
}
3 Réponses :
Vous ne pourrez pas cliquer par programmation sur les flèches d'un input type = "number" , mais ce n'est pas obligatoire car ce n'est pas ce que vous faites réellement vouloir faire. Ce que vous voulez faire est la même action qui se serait produite si l'utilisateur avait cliqué sur ces flèches. Donc, vous pouvez simplement lancer ce code vous-même. Dans ce cas, ajustez simplement la valeur de l'élément.
"ce n'est pas ce que vous voulez réellement faire" À moins que ce ne soit réellement le cas. Et s'ils veulent simuler une interaction utilisateur réelle?
@ziggywiggy À quelle fin?
Désolé mais vous répondez que ce n'est pas tout à fait vrai ... il peut y avoir des cas où je dois le faire ...
Cela dépendrait de l'intention de l'individu. À tout le moins, vous voudriez une représentation de l'événement dans cette situation.
Vous pouvez utiliser les méthodes stepUp et stepDown sur input [type = number] HTMLElement
Documentation stepUp Documentation stepDown
<input id=input type=number min=1 max=10> <button onclick="stepUp()">+</button> <button onclick="stepDown()">-</button>
function stepUp() {
document.getElementById('input').stepUp();
}
function stepDown() {
document.getElementById('input').stepDown();
}
Ceci est exactement ce que je cherchais. Merci de votre aide! Je n'ai pas pu trouver la documentation. Merci pour la référence du lien aussi :)
@RobertoManfreda: C'est une API intéressante, mais elle ne simule pas un clic sur les boutons. Espériez-vous réellement incrémenter / décrémenter d'une manière qui respecte le min et le max ?
Oui mais pourquoi??? L'exécution de l'extrait de code fonctionne ... J'ai modifié l'extrait original de ma réponse en ajoutant simplement les appels stepUp () et stepDown () et tout fonctionne! o.O
Ce sont des méthodes disponibles sur l'élément input [type = number] ( html.spec.whatwg.org/multipage/input.html#dom-input-stepup )
@RobertoManfreda Si vous trouvez ma réponse utile, merci de la voter. Cela m'aiderait aussi.
@RobertoManfreda: Je basais simplement mon commentaire sur votre question réelle, qui consiste à simuler des clics, ce que cela ne fait pas. Un clic simulé serait représenté par un événement sur l'entrée numérique. Il semble que vous ne vouliez pas du tout un clic simulé, mais que vous vouliez un serrage automatique sur la plage donnée.
Obtenez les coordonnées du bouton haut / bas.
var event = $.Event('click');
event.clientX = 12.796875;
event.clientY = 9;
$('.upButton').trigger(event);
Cliquez sur ces coordonnées.
$('#upButton').click(function (e){
var elm = $(this);
var xPos = e.pageX - elm.offset().left;
var yPos = e.pageY - elm.offset().top;
​
console.log(xPos, yPos);
});
Votre extrait de code ne s'exécute pas correctement mais je pense que votre solution peut aussi fonctionner ... même si je préfère ne pas utiliser jQuery à cette fin :)
Ouais, j'espérais que cela fonctionnerait mais cela dépend probablement de la résolution et de tout ça. Je l'ai sorti mais vous pouvez tester. J'ai réussi à le faire fonctionner de mon côté.
C'est probablement impossible.
Obtenez simplement une référence à l'entrée et définissez la valeur. Aucun clic requis.
Oui, je sais que c'est la bonne façon mais j'étais curieux de savoir qu'il était possible de cliquer sur les flèches :)
Mais pourquoi le voulez-vous?