0

我有一个简单的案例。我想要两件事。

  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

首先，从标签中删除“inline-block”并添加如下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 输入太靠右了，因为您将标签的宽度设置为 400 像素，我刚刚删除了它，现在看起来很好。还添加了一些快速验证，您显然必须在提交表单时运行验证。

<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

使用 jQuery 提交时验证非常简单。这是一个例子。如果你想让它永远不会有数字以外的东西，你可以使用 onchange 或 onkeyup 事件并简单地从输入中删除数字。

对于定位，请尝试使用 inline 而不是 inline-block。

于 2012-11-20T15:55:08.303 回答