0

私は簡単なケースを持っています。欲しいものは2つ。

  1. 入力の横にラベルを付けます。
  2. ある種の検証、テキスト ボックスの桁数のみ。

対応リンクはこちら。

入力はラベルの下にあります。私のコード:

<div id="generatePinsDialog" title="Generate New PINs">
<label style="display: inline-block; width: 400px;">
    How many?</label>
<input id="newInmateCount" type="text" size="25" value="Enter the number!" />
<br />
<select>
    <option value="sameAsID">Same as ID</option>
    <option value="appendID">AppendID</option>
</select>

4

6 に答える 6

3

デモ: http://jsfiddle.net/GCtPE/25/

label, input { display: inline-block; }

HTML5 はすべてのブラウザーで完全にサポートされているわけではないため、検証には JavaScript を使用する必要があります。ただし、HTML5 はかなりクールです。

于 2012-11-20T15:52:16.493 に答える
2

を取り外しますdisplay: inline-block。これにより、入力フィールドが新しい行に移動します。

このjs関数を使用して、数字のみを検証し、入力フィールドのイベントと呼ぶか、イベントonkeypressにバインドしますonkeydown

function onlyNumbers(evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[0-9]|\./;
    if( !regex.test(key) ) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();   
    }
}

jsFiddle デモ

于 2012-11-20T15:53:30.153 に答える
2

まず、ラベルから「インライン ブロック」を削除し、次のforように属性を追加します。

<label for="newInmateCount" style="width: 400px;">How many?</label>

入力に関しては、数値のみに対してこれを行います。

$("#newInmateCount").keydown(function(e) {
    if (e.which == 8 || e.which == 46) return true; // for backspace and delete
    if (e.which < 48 || (e.which > 57 && e.which < 96) || e.which > 105) return false;
});

jsFiddle が更新されたことを確認します

于 2012-11-20T16:02:48.797 に答える
0

入力の横にラベルを配置するには、 に変更display:inline-block;するdisplay:inlineか、目的の位置になるまで をより低い値に減らしwidth:400pxます。検証のために、正規表現でいくつかの読み取りを行う必要があります

于 2012-11-20T15:52:21.583 に答える
0

jsfiddle here ラベルの幅を 400px に設定したため、入力は右端にありました。それを削除したところ、問題なく表示されます。また、いくつかの簡単な検証を追加しました。フォームが送信されたときに検証を実行する必要があることは明らかです。

<div id="generatePinsDialog" title="Generate New PINs">
    <label style="display: inline-block;">
        How many?</label>
    <input id="newInmateCount" type="text" size="25" value="Enter the number!" />
    <br />
    <select>
        <option value="sameAsID">Same as ID</option>
        <option value="appendID">AppendID</option>
    </select>
 </div>​

そしてJSは以下です：

if($('#newInmateCount').val() != "") {
    var value = $('#newInmateCount').val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    var intRegex = /^\d+$/;
    if(!intRegex.test(value)) {
        errors += "Field must be numeric.<br/>";
        success = false;
    }
} else {
    errors += "Field is blank.</br />";
    success = false;
}​
于 2012-11-20T15:53:57.757 に答える
0

On-submit validation is pretty easy with jQuery. Here's an example. If you want to keep it from ever having something other than numbers in it, you can go with an onchange or onkeyup event and simply strip the numbers from the input.

For the positioning, try inline instead of inline-block.

于 2012-11-20T15:55:08.303 に答える