5
大きなデータリストに関連付けられたタグを含むhttp://codepen.io/liang179/pen/WQvERKのHTMLページがあります。クロムに表示されるオーバーフローがあります。画面にはまだデータがありません。しかし、スクロールバーではFirefoxでうまくいきます。 firefoxのようにスクロールバーを使ってクロムで表示させるにはどうすればよいですか？ 以下はそのコードです。 HTML5 <input>タグのオーバーフロークロムのデータリストを使用
$('#trigger').click(function(){
\t \t $class = "animated infinite " + $('#type').val();
\t \t $('#target').removeClass().addClass($class);
});<div style="text-align: center;">
\t <div id='target' style="margin: 200px auto; width: 200px; height:200px; background-color:#663399"></div>
\t <div>
\t \t <input id="type" list="classes">
\t \t <datalist id="classes">
\t \t \t <option value="bounce">
\t \t \t <option value="flash">
\t \t \t <option value="pulse">
\t \t \t <option value="rubberBand">
\t \t \t <option value="shake">
\t \t \t <option value="swing">
\t \t \t <option value="tada">
\t \t \t <option value="wobble">
\t \t \t <option value="jello">
\t \t \t <option value="bounceIn">
\t \t \t <option value="bounceInDown">
\t \t \t <option value="bounceInLeft">
\t \t \t <option value="bounceInRight">
\t \t \t <option value="bounceInUp">
\t \t \t <option value="bounceOut">
\t \t \t <option value="bounceOutDown">
\t \t \t <option value="bounceOutLeft">
\t \t \t <option value="bounceOutRight">
\t \t \t <option value="bounceOutUp">
\t \t \t <option value="fadeIn">
\t \t \t <option value="fadeInDown">
\t \t \t <option value="fadeInDownBig">
\t \t \t <option value="fadeInLeft">
\t \t \t <option value="fadeInLeftBig">
\t \t \t <option value="fadeInRight">
\t \t \t <option value="fadeInRightBig">
\t \t \t <option value="fadeInUp">
\t \t \t <option value="fadeInUpBig">
\t \t \t <option value="fadeOut">
\t \t \t <option value="fadeOutDown">
\t \t \t <option value="fadeOutDownBig">
\t \t \t <option value="fadeOutLeft">
\t \t \t <option value="fadeOutLeftBig">
\t \t \t <option value="fadeOutRight">
\t \t \t <option value="fadeOutRightBig">
\t \t \t <option value="fadeOutUp">
\t \t \t <option value="fadeOutUpBig">
\t \t \t <option value="flipInX">
\t \t \t <option value="flipInY">
\t \t \t <option value="flipOutX">
\t \t \t <option value="flipOutY">
\t \t \t <option value="lightSpeedIn">
\t \t \t <option value="lightSpeedOut">
\t \t \t <option value="rotateIn">
\t \t \t <option value="rotateInDownLeft">
\t \t \t <option value="rotateInDownRight">
\t \t \t <option value="rotateInUpLeft">
\t \t \t <option value="rotateInUpRight">
\t \t \t <option value="rotateOut">
\t \t \t <option value="rotateOutDownLeft">
\t \t \t <option value="rotateOutDownRight">
\t \t \t <option value="rotateOutUpLeft">
\t \t \t <option value="rotateOutUpRight">
\t \t \t <option value="hinge">
\t \t \t <option value="rollIn">
\t \t \t <option value="rollOut">
\t \t \t <option value="zoomIn">
\t \t \t <option value="zoomInDown">
\t \t \t <option value="zoomInLeft">
\t \t \t <option value="zoomInRight">
\t \t \t <option value="zoomInUp">
\t \t \t <option value="zoomOut">
\t \t \t <option value="zoomOutDown">
\t \t \t <option value="zoomOutLeft">
\t \t \t <option value="zoomOutRight">
\t \t \t <option value="zoomOutUp">
\t \t \t <option value="slideInDown">
\t \t \t <option value="slideInLeft">
\t \t \t <option value="slideInRight">
\t \t \t <option value="slideInUp">
\t \t \t <option value="slideOutDown">
\t \t \t <option value="slideOutLeft">
\t \t \t <option value="slideOutRight">
\t \t \t <option value="slideOutUp">
\t \t </datalist>
\t \t <button id="trigger">Trigger</button>
\t </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
に優先順位を付けれるかもしれませんことを示しているので、クロムのバグトラッカーでこのバグのためのチケットはオープン、ありますこの問題にも直面している。 html5データリストの入力にはスクロールバーが必要です。 – ahmadalibaloch
Chromeのデータリストのサポートは駄目です。スクロールバーを用意することなく、リストを画面からまっすぐにレンダリングするだけです。リストが長すぎると、Windows上のデスクトップウィンドウマネージャーがクラッシュします。これは、入力されたテキストを含むのではなく、最初に結果を提供するだけでした。私が懸念している限り、それは完全に使用できません。 Mozillaの動作はまったくまともな人が期待するものとまったく同じです。これらの問題にはいくつかのバグレポートがありますが、息を止めないでください。 –