1

特にAndroidとiPhoneの場合、選択リストのテキストを水平方向に中央揃えにする必要があります。これはCSSでは実行できないようですので、回避策を探しています。

テキストを中央に配置したdivの背後に入力を非表示にし、JavaScriptを使用してdivをクリックしたときに入力を選択することを考えていました。次に、div内のテキストを、選択したオプションのテキストと等しくなるように変更する必要があります。divがJavaScriptで作成されている場合、ページはJavaScriptを無効にして使用できます。

私は別の考えを持っていましたが、これは私には難しいようです。JavaScriptを使用して画面幅を取得し、計算を適用してから、適切な量のテキストインデントを入力に適用できます。

ベストプラクティスに興味がありますが、これはライブプロジェクトではなくデモプロジェクトです。jQueryを使用しています。ありがとう

更新-div＃coverが選択入力をカバーする次のことを試しました。私のiPadでは問題なく動作します。ただし、私の古いAndroidは常に入力に焦点を合わせるとは限りません。Firefoxは入力に焦点を合わせていますが、オプションは飛ばないので、矢印キーでスクロールする必要があります。したがって、このソリューションはidが期待するほど単純ではないようです。

$('div#cover').click(function(){
  $('#select').focus();
});
4

2 に答える 2

0

divの後ろにselectを非表示にするというあなたのアイデアは、もっと複雑なことをしました-selectを完全に非表示にし、HTMLに置き換え、JSからのすべての対話とCSSでのすべてのスタイル設定を行い、基になるselectへの変更を反映します（インスタンスは通常の方法でフォーム要素として送信されます）

私が書いたjQueryプラグインはとにかく非常に小さいものでした。すべてのスタイルと位置をCSSに配置したため、外観と大きな柔軟性を完全に制御できました。

于 2012-05-10T11:57:15.693 に答える
0

コードはここからです：jQuery-関数はdivクリックで起動すると正常に実行されますが、ページの読み込みでは実行されません

 function textIndentFunc () {

    textString = $('#from-1 :selected').text();

     $('#hidden').text(textString);

     textWidth = $('#hidden').width();

     inputWidth = $('#from-1 select').width();

     indentMy = (inputWidth / 2) - (textWidth / 2);

    $('#from-1').css('text-indent',indentMy);

}

 $('#from-1 select').change(function() {
    textIndentFunc();
 });

 textIndentFunc();
于 2012-05-14T16:17:53.107 に答える