jQuery - détermine si l'élément d'entrée est une zone de texte ou une liste de sélection

Question

Comment déterminer si l'élément renvoyé par un filtre: input dans jQuery est une zone de texte ou une liste de sélection?

Je veux avoir un comportement différent pour chaque (la zone de texte renvoie la valeur du texte, la sélection renvoie la clé et le texte)

Exemple de configuration:

 <div id="InputBody">
<div class="box">
    <span id="StartDate">
        <input type="text" id="control1">
    </span>
    <span id="Result">
        <input type="text" id="control2">
    </span>
    <span id="SelectList">
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </span>
</div>
<div class="box">
    <span id="StartDate">
        <input type="text" id="control1">
    </span>
    <span id="Result">
        <input type="text" id="control2">
    </span>
    <span id="SelectList">
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </span>
</div>
 

et ensuite le script:

 $('#InputBody')
    // find all div containers with class = "box"
    .find('.box')
    .each(function () {
        console.log("child: " + this.id);

        // find all spans within the div who have an id attribute set (represents controls we want to capture)
        $(this).find('span[id]')
        .each(function () {
            console.log("span: " + this.id);

            var ctrl = $(this).find(':input:visible:first');

            console.log(this.id + " = " + ctrl.val());
            console.log(this.id + " SelectedText = " + ctrl.find(':selected').text());

        });
 

Answer 1

Vous pourriez faire ceci:

 if( ctrl[0].nodeName.toLowerCase() === 'input' ) {
    // it was an input
}
 

ou ce qui est plus lent, mais plus court et plus propre:

 if( ctrl.is('input') ) {
    // it was an input
}
 

---

Si vous voulez être plus précis, vous pouvez tester le type:

 if( ctrl.is('input:text') ) {
    // it was an input
}
 

Answer 2

sinon, vous pouvez récupérer les propriétés DOM avec .prop

voici un exemple de code pour la case à cocher

 if( ctrl.prop('type') == 'select-one' ) { // for select box }
 

pour la zone de texte

   if( ctrl.prop('type') == 'text' ) { // for text box }