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

89

Comment déterminer si l'élément retourné 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 chacun (la zone de texte renvoie la valeur du texte, la sélection renvoie à la fois 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>

puis 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());

        });
Ajberry
la source

Réponses:

167

Vous pouvez faire ceci:

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

ou ceci, 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
}
utilisateur113716
la source
2
J'ai dû ajouter la syntaxe jquery $ (element) .is ('input') pour que cela fonctionne, mais dans l'ensemble, c'est génial.
Observer
28

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

voici un exemple de code pour la boîte de sélection

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

if( ctrl.prop('type') == 'select-multiple' ) { // for multi select }

pour la zone de texte

  if( ctrl.prop('type') == 'text' ) { // for text box }
Rohit
la source
Cela fonctionne comme un charme avec la nouvelle fonction jQuery prop (). Merci.
Thomas.Benz
8

Si vous voulez juste vérifier le type, vous pouvez utiliser la fonction .is () de jQuery,

Comme dans mon cas, j'ai utilisé ci-dessous,

if($("#id").is("select")) {
 alert('Select'); 
else if($("#id").is("input")) {
 alert("input");
}
Umesh Patil
la source