1. ホーム
  2. 質問と答え
  3. HTMLを選択してください。 に問題があります。

HTMLを選択してください。 に問題があります。

2012-07-19 3 views
12

私は以下のような項目を持つHTMLを選択しています。HTMLを選択してください。 に問題があります。

<SELECT id="mylist" size=5 > 
    <OPTION Value="100">100</OPTION> 
    <OPTION Value="200">200</OPTION> 
    <OPTION Value="210">210</OPTION> 
    <OPTION Value="211">211</OPTION> 
</SELECT>

enter image description here

私はSELECTとタイプ21の内側をクリックした場合さて、それは最初の項目は、すべての良い21で始まるでアイテム210を選択します。

後で、クライアントの要求に従ってアイテムの左側にパディングを追加したいとします。しかし、すぐに私はSELECTでパディングがIEで動作しないことが実現（少なくともIE6とIE7上で私がテストした）

だから私は今、私はパディングを模倣することができます&nbsp;&nbsp;

<SELECT id="mylist" size=5 > 
    <OPTION Value="100">&nbsp;&nbsp;100</OPTION> 
    <OPTION Value="200">&nbsp;&nbsp;200</OPTION> 
    <OPTION Value="210">&nbsp;&nbsp;210</OPTION> 
    <OPTION Value="211">&nbsp;&nbsp;211</OPTION> 
</SELECT>

enter image description here

を追加しました。

しかし、私は検索オプションを失った。 IEで21を入力すると210は選択されません。それはクロムでうまくいく。あなたの考えを共有してください。

私はこれを作ったhere

出典

2012-07-19 PraveenVenu

+5

時々、あなたのIEユーザーはちょうどつもり苦しまなければならされています。私個人的には、私はIE6ユーザーを罰し、私のサイトはそれらのためにできるだけ悪いように見える:)しかし、あなたはスパンで選択オプションを包むことができないし、それらをバンプする相対的な位置を使用する？ ***免責事項：これは意味論的な解決策ではありません。残念ながら、IEでいつかハッキングをしなければなりません。すでに –

+0

も試してみました。しかし、IEはそれにも抵抗しています:) – PraveenVenu

+0

ライブバージョンはどこにセットアップしましたか？ – Chad

答えて

2

方法のdivでラップについて：

HTML：

<div class="listwrapper"> 
    <SELECT id="mylist" size=5 > 
     <OPTION Value="100">100</OPTION> 
     <OPTION Value="200">200</OPTION> 
     <OPTION Value="210">210</OPTION> 
     <OPTION Value="211">211</OPTION> 
    </SELECT> 
</div>​

CSS：

.listwrapper 
{ 
    padding: 0px 0px 0px 15px; 
    border: solid 1px silver; 
    width: 50px; 
} 
.listwrapper select, 
.listwrapper select:active 
{ 
    border: none 0px white; 
    width: 50px; 
} 
​

My Fiddle

出典

2012-07-22 11:42:05

+0

これは、コンテンツのみをパディングするのではなく、リストボックス全体を埋め込みます。 – PraveenVenu

+1

@PraVn。それがアイデアです。リストボックスの枠線を削除し、div内に配置します。代わりにdivの枠線を設定して、リストボックスのスタイルを模倣します。 divをそれがリストボックスであるかのように埋めます。 –

+0

ああ、私はそれを得られませんでした：視覚的に視覚的に（そして視覚的にのみ、選択されたオプションの幅を見て）選択肢の境界線ではなくdivの境界線を見るでしょう。 （マルチライン選択で、ドロップダウン選択ではありません） – FelipeAls

-1

サンプルを見つけ、私はあなたがこのような何かをしたいと仮定します。MyFiddle

<style> 
    option { 
    width: 40px; 
    text-align: center; 
    } 
</style> 

<SELECT id="mylist" size=5 > 
    <OPTION Value="100">100</OPTION> 
    <OPTION Value="200">200</OPTION> 
    <OPTION Value="210">210</OPTION> 
    <OPTION Value="211">211</OPTION> 
</SELECT>

出典

2012-07-20 07:48:49

+0

左の余白が不均一になるように値の長さが異なる場合、これは機能しません。 – PraveenVenu

-1

使用& NBSPはIEで適切なパディングを取得し、押されたキーに基づいてアイテムを選択するには、キーイベントを使用します。

出典

2012-07-23 08:56:06 Koti

+0

私はあなたに私にこの – PraveenVenu

+0

のためのjavascriptを与えることができる場合、これを選択することができます@PraVnは私のポストをチェックします、私はそれについてもう少し詳しく説明しました。 – jzacharia

1

<style>は、したがって、パディングを追加し、インライン要素が、これはこのことができます役立ちます

使用

<style> 
    #mylist 
{ 
    padding-left:10px; 
    display:block; 
} 
</style>​

希望を克服することができますdisplay:block;とただしIE6では動作しませんです。 Fiddle here

出典

2012-07-24 08:25:38

+0

私はすでに、IE6とIE7では埋め込みが機能しないと言っています。 – PraveenVenu

+0

display：block;私が思う仕事をするべきです。 –

+0

これは動作しません。 – PraveenVenu

-1

これはIE6/7を使用して、問題の一部とすることができる：デフォルトのCSS値を入れて

IE's Default CSS Values

ダムの場所。 IE8以降ではこの問題は発生していないようです。

出典

2012-07-24 19:09:10 tahdhaze09

-1

jQueryにはこれに対応するソリューションがありますが、onkeypressイベントを使用してアイテムを選択することもできます。

HTML

<element onkeypress="JavaScriptCodeHere">

JS

object.onkeypress="JavaScriptCodeHere"

ここからは、キー操作に基づいて数字を引っ張って、あなたのJSスクリプトでJavaScriptCodeHereを交換してください。私はあなたのためにそれを作るつもりはありません、それはこのサイトのためのものではありませんが、私は正しい方向にあなたを指すことができます。

keycharとnumcheck役立つかもしれません。）

出典

2012-07-24 23:29:31 jzacharia

+1

ありがとうございます。私はkeyupで関数を書いてそれを連結しました。また、2秒後に2番目のキーが押されなかった場合は、タイマーをクリアしてクリアします。 – PraveenVenu

0

オプションにこのfiddle

出典

2012-07-26 11:04:00

+0

IE6/7で動作していません – PraveenVenu

+0

@flem：1文字編集で何十もの投稿をすばやく続けている理由はありますか？ – BoltClock

0

はい、ビジェイによって答えが正しい方法である

#mylist 
{ 
    padding-left: 10px; 
}

チェックを動かすために必要な左パディングを与えます。他のものより常にCSSを使用する必要があります。ここで

は一例です： - サイズを置く

<select size="10" style="text-align:center"> 
<option value="1">First</option> 
<option value="2">Second</option> 
<option value="3">Third</option> 
<option value="4">Four</option> 
</select>

は必須ではありません。

希望がいっぱいです。

出典

2012-07-26 13:25:23

+0

これを見てくださいhttp://jsfiddle.net/NUwTS/それは良く見えません。 – PraveenVenu

1

は、これは実際に動作CSSで

​select { width:auto; } 
option { text-align:center; }

を揃える使用してみてください。ここにあるthe proof in jsfiddle

出典

2012-07-27 10:54:19 InspiredJW

0

ブラウザの検索を上書きするようなjavascriptコードは、このようにすることができます。 たとえば、実行コードスニペットを参照してください。

if (!dimon) { 
 
\t var dimon = {}; 
 
} 
 
if (!dimon.select) { 
 
\t dimon.select = { 
 
\t \t /** 
 
\t \t * Contains last typed character, and last selected option value 
 
\t \t * (integer). For example, { "AlternativeMobileSelectionMenu" : { "char" : 
 
\t \t * "s", "index" : 115 }, "AlternativeTariffSelectionMenu" : { "char" : 
 
\t \t * "a", "index" : 0 } } 
 
\t \t */ 
 
\t \t hist : {}, 
 
\t \t search : function(select, e) { 
 
\t \t \t // JQuery select object 
 
\t \t \t var select = $(select); 
 
\t \t \t if (!select) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 
\t \t \t // id of HTML select, which is located under 0 index 
 
\t \t \t var sid = select[0].id; 
 

 
\t \t \t // dynamic HTML event 
 
\t \t \t e = e || window.event; 
 
\t \t \t var keycode = e.which || e.keyCode; 
 
\t \t \t keycode = String.fromCharCode(keycode); 
 
\t \t \t // Search should be case-insensitive 
 
\t \t \t keycode = keycode.toLowerCase(); 
 

 
\t \t \t if (keycode < 'a' && keycode > 'z') { 
 
\t \t \t \t // handle only alphabetic character is typed 
 
\t \t \t \t return; 
 
\t \t \t } 
 

 
\t \t \t // Prevent default browser behavior 
 
\t \t \t if (e.preventDefault) { 
 
\t \t \t \t e.preventDefault(); 
 
\t \t \t } else { 
 
\t \t \t \t e.returnValue = false; 
 
\t \t \t } 
 

 
\t \t \t if (!this.hist[sid]) { 
 
\t \t \t \t this.hist[sid] = {}; 
 
\t \t \t } 
 
\t \t \t var lastChar = this.hist[sid]['char']; 
 
\t \t \t if (keycode != lastChar) { 
 
\t \t \t \t // if a new character is typed, reset 
 
\t \t \t \t // last typed character 
 
\t \t \t \t this.hist[sid]['char'] = ''; 
 
\t \t \t \t // and last selected option 
 
\t \t \t \t this.hist[sid]['index'] = -1; 
 
\t \t \t } 
 

 
\t \t \t // options which matches the input character 
 
\t \t \t var filteredOptions = new Array(); 
 
\t \t \t // all select options 
 
\t \t \t var options = select.find("option"); 
 

 
\t \t \t for (var i = 0; i < options.length; i++) { 
 

 
\t \t \t \t var opt = $(options[i]); 
 
\t \t \t \t // Example option text 
 
\t \t \t \t // "  30|25   █ Magenta Mobil L mit Top-Handy" 
 
\t \t \t \t // "                  Sony Xperia Z2 schwarz (1,00 EUR)" 
 
\t \t \t \t var text = opt.text().toLowerCase(); 
 

 
\t \t \t \t // Regular expression finds the first alphabetic character 
 
\t \t \t \t var regexp = new RegExp("[^a-z]*([a-z]{1}).*", "i"); 
 
\t \t \t \t var result = regexp.exec(text); 
 
\t \t \t \t // the output will be: 
 
\t \t \t \t // 'm' 
 
\t \t \t \t // 's' 
 
\t \t \t \t text = result != null ? result[1] : ''; 
 

 
\t \t \t \t if (opt.val() != '' && text.indexOf(keycode) == 0) { 
 
\t \t \t \t \t // add option value, if it matches 
 
\t \t \t \t \t filteredOptions.push(opt.val()); 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t var size = filteredOptions.length; 
 
\t \t \t if (size == 0) { 
 
\t \t \t \t return; 
 
\t \t \t } 
 

 
\t \t \t // Example, if we have 2 mobile devices in the list 
 
\t \t \t // Samsung Galaxy S5 
 
\t \t \t // Sony Xperia Z2 
 
\t \t \t // and type 'S', then Samsung will be selected, 
 
\t \t \t // if we type 'S' for the second time, then Sony will be selected, 
 
\t \t \t // and if we type 'S' once again, then Samsung will be selected 
 
\t \t \t // again. 
 
\t \t \t // value of the first suitable option 
 
\t \t \t var firstOpt = parseInt(filteredOptions[0]); 
 
\t \t \t // value of the last suitable option 
 
\t \t \t var lastOpt = parseInt(filteredOptions[size - 1]); 
 
\t \t \t // Last selected option value 
 
\t \t \t var lastSelected = this.hist[sid]['index']; 
 

 
\t \t \t if (lastSelected == -1) { 
 
\t \t \t \t // Character is typed for the first time 
 
\t \t \t \t this.hist[sid]['char'] = keycode; 
 
\t \t \t \t this.hist[sid]['index'] = firstOpt; 
 
\t \t \t \t select.val(this.hist[sid]['index']); 
 
\t \t \t \t select.change(); 
 

 
\t \t \t } else if (lastSelected >= 0 && lastSelected < lastOpt) { 
 
\t \t \t \t // The same character is typed, just increment the option value 
 
\t \t \t \t this.hist[sid]['index'] = lastSelected + 1; 
 
\t \t \t \t select.val(this.hist[sid]['index']); 
 
\t \t \t \t select.change(); 
 

 
\t \t \t } else if (lastSelected >= 0 && lastSelected == lastOpt) { 
 
\t \t \t \t // The same character is typed, but the last suitable option was 
 
\t \t \t \t // already selected before. 
 
\t \t \t \t // So select the first option again 
 
\t \t \t \t this.hist[sid]['index'] = firstOpt; 
 
\t \t \t \t select.val(this.hist[sid]['index']); 
 
\t \t \t \t select.change(); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
}
<html> 
 
<head> 
 
<script 
 
\t src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
\t <select id="devices" size="1" 
 
\t \t onkeypress="dimon.select.search(this, event)"> 
 
\t \t <option value="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apple iPhone 
 
\t \t \t 5s 64GB Gold (199,95 EUR)</option> 
 
\t \t <option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Samsung 
 
\t \t \t Galaxy S5 LTE+ weiß (1,00 EUR)</option> 
 
\t \t <option value="2">&nbsp;30|25&nbsp;█&nbsp;Sony Xperia Z2 
 
\t \t \t Tablet LTE+ (19,95 EUR)</option> 
 
\t \t <option value="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia 
 
\t \t \t Z2 schwarz (1,00 EUR)</option> 
 
\t \t <option value="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia 
 
\t \t \t Z2 weiß (1,00 EUR)</option> 
 
\t </select> 
 
</body> 
 
</html>

出典

2015-03-17 09:22:52 Dimon579

関連する問題

 関連する問題