PlaceHolder is not working properly in Mobile Devices

2018-06-25 04:56:12

Am working in jQueryMobile and PhoneGap.

Here I have a problem. When I use PlaceHolder;

<input name="text-6" id="text-6" value="" placeholder="Put something here" type="text"/>

It was works fine in Browser but not in Mobile. My need was Here I need to show the placeholder until user type something in that text-box. Placeholder should be visible if he didn't type anything but focus on that Text-box. This is because users typically press the tab before reading the next field in which case the empty text is already gone and the user has harder time knowing what to type. like Twitter Login Page . But Its Hide when we Focus on that textBox.

So I implemented it manually..

Html

<input type="text" id="test" value="Im a placeholder!"/>

JQuery

var placeholder = $("#test").val();
$("#test").keydown(function() {
    if (this.value == placeholder) {
        this.value = '';
    }
}).blur(function() {
    if (this.value == '') {
        this.value = placeholder;
    }
});

But when I click on the textBox; Cursor is showing after the PlaceHolder value.

But My need is the Cursor should be starts from the beginning of the TextBox. What can I do in this?

Try like this

var placeholdervalue = $("#test").attr("value");
$("#test").focus(function(){
$(this).attr('value',"");
});
$("#test").on("blur",function(){
$(this).attr('value',placeholdervalue);
});

See Demo

As I mentioned in the comment above, I would work with the html5 placeholder attribute and a fallback for browsers, which do not support this:

// test the support
function hasPlaceholderSupport() {
    var input = document.createElement('input');
    return ('placeholder' in input);
}

// and as a fallback...
if(!hasPlaceholderSupport) {
$('input[type=text]').each(function() {
       var elm  = $(this),
        ph = $(this).attr('placehold');
    if(ph) {
        elm.focus(function() {
            if($(this).val() == ph) {
               $(this).val('');
            }
        }).blur(function() {
          if($(this).val() == '') {
               $(this).val(ph);
            }
        });
    }
})};

You can find a demo here.

placeholder is an attribute in HTMl5 for input box .. so it better u give it as

$("#idoftheelement").attr("placeholder","your text in placeholder");

and to remove it ..

$("#idoftheelement").removeAttr("placeholder");

try this let me know if it works.....

链接地址: http://www.djcxy.com/p/70570.html

上一篇: 使用jquery更改占位符文本也是自动的