comment obtenir la valeur de l'élément à partir de l'événement focus-flou dans javascript

Question

J'aime savoir comment obtenir la valeur de l'élément (en utilisant l'événement click) déclenché dans l'événement focus-blur. Je crée un sélecteur d'icônes qui comme jQuery datepicker. Voici le code, mais quand je clique sur l'icône, l'élément sélecteur de date masquer sans donner la valeur.

code PHP

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/> 
<div id="iconPicker" class="iconpicker dropdown-menu"> 
    <div class="iconpicker-wrapper"> 
     <table class="dt-icons"> 
     <?php 
     foreach (array_chunk($icons, 5, true) as $icon_cunk) { 
      echo '<tr>'; 
      foreach($icon_cunk as $key => $ico) { 
       echo '<td data-value="'. $key .'"><i class="' . $key .'"></i></td>'; 
      } 
      echo '</tr>'; 
     } 
     ?> 
     </table> 
    </div> 
</div> 

Javascript

$("#contentIcon").keypress(function (e) { 
    e.preventDefault(); 
}); 

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $('#contentIcon').empty(); 
    var _dtself = $(this); 
    document.getElementById("contentIcon").value = _dtself.data('value'); 
}); 

$('#contentIcon').focus(function() { 
    $('#iconPicker').show();    
}).blur(function() { 
    $('#iconPicker').hide(); 
}); 

Mise à jour

#iconPicker est cachée (display: none) élément, utilisé pour choisir l'icône. Il s'affichera lorsque l'utilisateur se concentrera sur le champ de saisie #contentIcon et sera masqué lorsque l'événement de flou sera déclenché. Si je supprime $('#iconPicker').hide(); dans blur même une partie de gestionnaire, alors (formater ce code, grâce à @Reddy)

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $("#contentIcon").val($(this).data('value')); 
}); 

peut être déclenchée et la valeur accordée au champ d'entrée #contentIcon. Mais, #iconPicker pas caché en arrière. Si j'ai utilisé $('#iconPicker').hide(); dans le gestionnaire d'événements click, le #iconPicker ne se cache pas si l'utilisateur ne choisit pas l'icône.

mise à jour

ici l'exemple jsfiddle.net

Answer 1

-je résoudre ce problème par l'outil @CMS' answer. Avec quelques modifications ici les codes.

de PHP

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/> 
<div id="iconPicker" class="iconpicker dropdown-menu"> 
    <div class="iconpicker-wrapper"> 
     <table class="dt-icons"> 
      <?php 
      $a = 0; 
      foreach (array_chunk($icons, 5, true) as $icon_cunk) { 
       echo '<tr>'; 
       foreach($icon_cunk as $key => $ico) { 
        if ($a == 0) { 
         echo '<td><a class="action-placement choosed-icon" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>'; 
        }else { 
         echo '<td><a class="action-placement" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>'; 
        } 
        $a++; 
       } 
       echo '</tr>'; 
      } 
      ?> 
     </table> 
    </div> 
</div> 

Javascript de

$(document).on('keypress keydown', '#contentIcon', function (e) { 
    e.preventDefault(); 
}); 

document.onclick = function (e) { 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    if (element.id !== "contentIcon" && element.tagName !== "A" && element.className !== "action-placement" 
      && element.tagName !== "I" && element.className !== "icon-placement") { 
     $('#iconPicker').hide(); 
    } 
}; 

$(document).on('click', '#iconPicker table.dt-icons td a', function() { 
    $(".choosed-icon").removeClass("choosed-icon"); 
    $(this).attr("class", "choosed-icon"); 

    $("#contentIcon").val($(this).data('value')); 
}); 

$('#contentIcon').on('click', function() { 
    $('#iconPicker').show(); 
    $('#iconPicker').focus(); 
}); 

Voici le demo.

Answer 2

Essayez cette; Cependant, votre code n'est pas très clair.

$("#contentIcon").keypress(function (e) { 
    e.preventDefault(); 
}); 

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $('#contentIcon').empty(); 
    var _dtself = $(this); 
    document.getElementById("contentIcon").value = _dtself.data('value'); 
}); 

$('#contentIcon').focus(function() { 
    $('#contentIcon').show(); 
    console.log($('#iconPicker').val());    
}).blur(function() { 
    $('#contentIcon').hide(); 
    console.log($('#iconPicker').val()); 
}); 

Answer 3

Vous pouvez refactoriser le code en une seule ligne comme ci-dessous. Cependant, c'est la même chose que ce que vous avez maintenant.

$(document).on('click', '#iconPicker table.dt-icons td', function() { 
    $("#contentIcon").val($(this).data('value')); 
}); 

$(this).data('value') est la bonne façon de le faire, si cela ne fonctionne pas pour vous pour une raison quelconque, vous pouvez utiliser attr pour récupérer toute valeur d'attribut comme ci-dessous

$(this).attr('data-value')