25

一部の人はすでに知っているかもしれませんが、select 要素のスタイリングは悪夢であり、JavaScript のトリッキーなしでは文字通り不可能です。HTML5 の新しいデータリストは、ユーザーにオプションのリストが表示され、値が入力テキスト フィールドに記録されるため、同じ目的を果たすことができます。

ここでの制限は、ユーザーがテキスト フィールドに何かを入力し始めるまでリストが表示されず、入力に基づいて可能な一致のみが表示されることです。私が望む動作は、フィールドにフォーカスがあるとすぐに、オプションのリスト全体が表示されるようにすることです。

だから私はこのコードを持っています-jsbinで見る

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
  <input list="categories">
  <datalist id="categories">
    <option value="Breakfast">Breakfast</option>
    <option value="Brunch">Brunch</option>
    <option value="Lunch">Lunch</option>
    <option value="Dinner">Dinner</option>
    <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

そして、私はそれをこのJavascriptで表示しようとしています:

    var catVal = document.getElementsByTagName("input")[0],
    cat = document.getElementById("categories");

    catVal.style.fontSize = "1.3em";

    catVal.addEventListener("focus", function(event){
     cat.style.display = "block";
    }, false);

どんな助けでも大歓迎です、

乾杯

4

4 に答える 4

10

次のコードを使用します。

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value = '';" 
    onmouseup="value = old;"/>

<datalist id="anrede">
    <option value="Herr" selected></option>
    <option value="Frau"></option>
    <option value="Fraulein"></option>
</datalist>

mouseover:
フォーカスを設定し、古い値を -- グローバル -- 変数に記憶します

mousedown:
値を削除して表示datalist(組み込み機能)

mouseup:
古い値を復元します

次に、新しい値を選択します。

これがコンボボックスに対する許容可能な回避策であることがわかります。

于 2013-12-17T23:15:39.337 に答える
-3

HTML:

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

   <meta charset=utf-8 />
   <title>Input - Datalist</title>
</head>
<body>

  <input list="categories" id="categories2" type="text">
  <div id="result"></div>
  <datalist id="categories">
     <option value="Breakfast">Breakfast</option>
     <option value="Brunch">Brunch</option>
     <option value="Lunch">Lunch</option>
     <option value="Dinner">Dinner</option>
     <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

jQuery:

var result='';
$(document).ready(function(){  
   $('input[type=text]').focus(function(){
      $('#categories option').each(function(){
      result=result+" "+$(this).val();
      });

      $('#result').show().html(result);
      $('input[type=text]').unbind('focus');
   });
   $('input[type=text]').blur(function(){
       $('#result').hide();  
       $('input[type=text]').focus(function(){
           $('#result').show();
       });

   });  
});

ワーキング JS ビン

http://jsbin.com/urupit/4/watch

于 2013-03-26T20:36:47.837 に答える