javascriptのフォーカスブラーイベントから要素値を取得する方法

Question

フォーカスブラーイベントでトリガされた要素（クリックイベントを使用）から値を取得する方法を知りたい。私はjQueryのdatepickerのようなアイコンピッカーを作成します。ここではコードですが、アイコンをクリックすると日付ピッカー要素は値を与えずに非表示になります。アイコンを選択するために使用される要素、：

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

更新

#iconPickerは、隠された（未表示）です。ユーザーが#contentIcon入力フィールドにフォーカスしたときに表示され、ぼかしイベントがトリガーされたときに非表示になります。 Iはblurでさえハンドラ部を$('#iconPicker').hide();を削除する場合は、（私はこのコードをフォーマットし、@Reddyおかげ）

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

をトリガすることができ、値は#contentIcon入力フィールドに置か。しかし、#iconPickerは隠されていません。 をclickイベントハンドラで使用した場合、#iconPickerはユーザーがアイコンを選択しないと非表示になりません。ここ

更新

例jsfiddle.net

Answer 1

以下のような任意の属性値を取得するためにattrを使用することができ、これは何らかの理由であなたのために働いていないが場合は、それを行うための正しい方法であります@CMS' answerを実装します。ここでいくつかの変更を加えてコード。

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の

$(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(); 
}); 

demo。

Answer 2

はこれを試してみてください。しかし、あなたのコードはいくぶん不明です。

$("#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

コードを次のように1行にリファクタリングすることができます。しかしこれはあなたが今持っているものと同じです。

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

$(this).data('value')、あなたは、私はこの問題を解決するため

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