0

我只想要一个小代码来验证我的文本框。基本上我只想在文本框中输入数字。

现在我的代码正在运行，但我无法删除默认占位符文本。

<div id="generatePinsDialog" title="Generate New PINs">
    <label>How many will be generated?
        <span style="position: relative;">
            <input id="newInmateCount" name="text" maxLength="6" type="text" placeholder="Enter the number" />
            <label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="newInmateCount">Enter the number!    
            </label>
       </span>
    </label>
    <br />
</div>

和

$("#newInmateCount").data("defTxt", $("#newInmateCount").val());
$("#newInmateCount").bind("blur focus", function (e) {
    $(this).val($(this).val() == $("#newInmateCount").data("defTxt") ? "" : $("#newInmateCount").data("defTxt"));
});


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

链接。

4

3 回答 3

1

问题是<label>: 你已经有了你的placeholder属性<input>，它的行为应该完全符合你的要求。但是你也有一个在<label>场上的定位，这把一切都搞砸了。

只要去掉标签，当您在字段中输入数字时，占位符文本就会消失。

请参阅jsfiddle 上的示例。

于 2012-11-26T13:27:06.577 回答
0

您已将第二个标签放在输入字段上。这些占位符是浏览器生成的。你不应该试图伪造它。

第一个标签的嵌套也是错误的。

这很有效，看起来好多了http://jsfiddle.net/mGAPs/11/

 <div id="generatePinsDialog" title="Generate New PINs">
 <label for="newInmateCount">How many will be generated?</label>
 <input id="newInmateCount" name="text" maxLength="6" type="text" placeholder="Enter the number" />
 </div>

编辑

您也可以为 IE9 修复此 HTML5 行为

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

不利的一面是你需要改变你的第一点 jquery（它也使用焦点和模糊）我在这个工作示例中禁用了它：http: //jsfiddle.net/mGAPs/12/

于 2012-11-26T13:37:25.020 回答
0

我会去找@Jeroen 的答案，甚至使用 html5“数字”类型

<div id="generatePinsDialog" title="Generate New PINs">
    <label for="newInmateCount">How many will be generated?</label>
    <input id="newInmateCount" name="text" step="1" min="0" max="999999" type="number" placeholder="Enter the number" />
</div>

为了跨浏览器兼容性，您最好使用上面建议的第三方插件

于 2012-11-26T13:46:39.117 回答