4

よりスマートな携帯電話（Android、iPhone、その他）に、テンキーが通常のキーボードよりもユーザーにとって興味深いことを示すために、モバイルアプリケーションでHTML input type="number"を使用したいと思います。これはうまく機能します。

だから、私はここにこのHTMLを持っています：

<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>

ここで適用される重要なCSS要素は次のとおりです。

input {
  height: 2em;
  padding: 0.2em 0.5em;
  width: 100%;

  /* avoid iPhone rounded corners */
  border: 1px solid #afb7c1;
  border-collapse: collapse;
  border-radius: 0 0 0 0;
}

.input-number {
  text-align: right;
}

これは次のようにレンダリングされます。

ここに画像の説明を入力してください

上記はiOS4.1から撮ったスクリーンショットで、世界はまだ大丈夫でした。また、Androidスマートフォンでは、すべてが正常に機能します。しかし、iOS 4.2、4.3で何が起こるかを確認してください。

ここに画像の説明を入力してください

突然、数字のフィールドの幅が少し狭くなりました。まるで、入力にtype = "number"がある場合に、一部のブラウザに表示される役に立たないスピナーのためにiPhoneがスペースを空けようとしているようです。

誰かがそのような問題を知っていますか？どのように修正しましたか？またはそれを回避しますか？携帯電話にテンキーを好ませる他の方法はありますか？または、この追加の右マージンを元に戻すために適用できる独自のcssスタイルはありますか？

4

4 に答える 4

7

実際、質問者自身は、それがスピナーのせいであることを知っているので、答えに非常に近いです。幸いなことに、Webkitを使用すると、ユーザーはCSSでそれを制御できます。

input[type="number"]::-webkit-outer-spin-button { display: none; }

出典：WEBKITの入力タイプ=番号のスピン制御を削除

ライブデモ： http： //jsbin.com/aviram/5/

お役に立てば幸いです。

于 2011-08-05T05:16:44.640 に答える
6

vincicatのソリューション（以前はバウンティで受け入れられていた）は最初は機能しているように見えましたが、Webkitブラウザーのさらに別のレンダリングの欠陥が明らかになりました。<td>10ページ中2ページの更新では、入力をaに入れてスタイルを設定すると、入力は幅ゼロでレンダリングされましたwidth: 100%...

より良い解決策（私のユースケースの場合）はここにあります：

input type = "number"でwebkitのスピンボタンを無効にしますか？

これらのCSSスタイルで構成されています。

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

興味深い追加：<input type="number"/> BlackberryのWebKitブラウザでこのフィールドに非常にひどい欠陥があることがわかりました。ブラウザのクラッシュの原因のようです。そうは言っても、そのHTML5機能はもう使用していません...

于 2011-08-22T14:24:24.300 に答える
3

これが役立つかどうかはわかりませんが、これらの行をinputcssに追加してみてください

-webkit-box-sizing: border-box;
box-sizing: border-box;
于 2011-07-26T09:59:23.717 に答える
0

私はそれをテストするために古いiOSデバイスにアクセスできませんが、これは最新のiOSで機能し、同時にGoogle Chromeは幅に従わなくなり始めました：同様に、これは両方を修正します：

input[type=number] {
  max-inline-size: none; /* chrome 71 */
  max-width: unset; min-width: unset; /* iOS12 */
}
于 2019-03-14T00:02:09.157 に答える