javascript - 検索で問題が発生した HTML Select のパディング

Question

以下のようなアイテムを持つ 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>

ここに画像の説明を入力

ここでをクリックして21 と入力すると、最初の項目が 21 で始まるSELECT項目が選択されます。問題ありません。210

後で、クライアントの要求に応じて、アイテムの左側にパディングを追加したいと考えました。しかしすぐに、IE ではパディングが機能しないことに気付きましたSELECT(少なくとも、私がテストした IE6 と IE7 では)。

だから私は追加しました  

<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>

ここに画像の説明を入力

これで、パディングを模倣できます。

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

サンプルはこちら

score 2 · Accepted Answer

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

私のフィドル

score 1 · Accepted Answer

CSS で align を使用してみる

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

これは実際に機能します。これがjsfiddleの証明です

score 1 · Accepted Answer

<style>はインライン要素であるため、パディングの追加は IE6 では機能しませんが、display:block;これで解決できます

使用する

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

これが役立つことを願っています。ここでフィドル

score 0 · Accepted Answer

オプションを移動するために必要な左パディングを与える

#mylist
{
  padding-left: 10px;
}

このフィドルをチェックしてください

score 0 · Accepted Answer

はい、Vijay の回答が正しい方法です。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>

サイズの記入は必須ではありません。

それが助けになることを願っています。

score 0 · Accepted Answer

ブラウザ検索をオーバーライドする JavaScript コードは、次のようになります。たとえば、実行コードスニペットを参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

			} else if (lastSelected >= 0 && lastSelected == lastOpt) {
				// The same character is typed, but the last suitable option was
				// already selected before.
				// So select the first option again
				this.hist[sid]['index'] = firstOpt;
				select.val(this.hist[sid]['index']);
				select.change();
			}
		}
	}
}

<html>
<head>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
	<select id="devices" size="1"
		onkeypress="dimon.select.search(this, event)">
		<option value="0">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apple iPhone
			5s 64GB Gold (199,95 EUR)</option>
		<option value="1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Samsung
			Galaxy S5 LTE+ weiß (1,00 EUR)</option>
		<option value="2">&nbsp;30|25&nbsp;█&amp;nbsp;Sony Xperia Z2
			Tablet LTE+ (19,95 EUR)</option>
		<option value="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 schwarz (1,00 EUR)</option>
		<option value="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sony Xperia
			Z2 weiß (1,00 EUR)</option>
	</select>
</body>
</html>

score -1 · Accepted Answer

＆nbspを使用してIEで適切なパディングを取得し、keyeventを使用して押されたキーに基づいて項目を選択します。

score -1 · Accepted Answer

jQueryにはこれに対する解決策があります。または、onkeypressイベントを使用してアイテムを選択できます。

HTML

<element onkeypress="JavaScriptCodeHere">

JS

object.onkeypress="JavaScriptCodeHere"

ここからJavaScriptCodeHere、JSスクリプトに置き換えて、キー押下に基づいて数値を取得します。このサイトの目的ではないので、私はあなたのためにそれを作るつもりはありませんが、私はあなたを正しい方向に向けることができます。

keycharそしてnumcheck役立つかもしれません;）

score -1 · Accepted Answer

これは、IE6/7 の問題の一部である可能性があります。

IE のデフォルト CSS 値

デフォルトの CSS 値を配置するためのばかげた場所。IE8 以降では、この問題はないようです。

score -1 · Accepted Answer

私はこれを作りました、私はあなたがこのようなものが欲しいと思います: 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>

javascript - 検索で問題が発生した HTML Select のパディング

10 に答える 10

Related