CODEWITHSUNDEEP
javascriptjqueryhtml
user1108948
user1108948

Reputation:

Placeholder: the default text

I just want a small code for my textbox validation. Basically I want to input digit number in a textbox only.

Now my code is working, but I can't remove the default placeholder text.

<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>

And

$("#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;
});

The link.

Upvotes: 0

Views: 318

Answers (3)

Jeroen
Jeroen

Reputation: 1638

You've placed your second label over the input field. These placeholders are browser generated. You shouldn't try to fake that.

Also the nesting of the first label is wrong.

This works and looks much better 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>

EDIT

You can fix this HTML5 behavior also for IE9

$('[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();

The down side is that you need to change your first bit of jquery (which also uses focus and blur) I've disabeled it in this working example: http://jsfiddle.net/mGAPs/12/

Upvotes: 0

Renato Gama
Renato Gama

Reputation: 16529

I would go for the @Jeroen answers and even use the html5 "number" type

<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>

For cross-browser compatibility you better use third party plugins like this one suggested above

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71918

The problem is the <label>: you already have the placeholder attribute on your <input>, which should behave exactly as you say you want. But you also have a <label> positioned over the field, and that's messing up everything.

Just get rid of the label, and the placeholder text will disappear when you enter a number into the field.

See an example on jsfiddle.

Upvotes: 1

Related Questions