Question

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

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

<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;
});

link.

Answer 1

问题在于<label>：您placeholder上已经拥有<input>属性，该属性应该与您想要的完全一致。但是你还有<label>将定位在字段上，这会弄乱一切。

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

查看example on jsfiddle。

Answer 2

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

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

这可行并且看起来更好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/

Answer 3

我会去@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>

对于跨浏览器兼容性，您最好使用第三方插件，例如上面建议的this one

占位符：默认文本

3 个答案: