clear default text on form field elements for mobile site
Ok I'm using the jQuery Mobile framework and I would like to be able to use the default values in a text or text area as helper text. But on focus clear the text and keep the newly entered value. Also on re-focus (say they touch it ag开发者_如何学运维ain by mistake) not to clear the value again.
I'm including these
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
The example is not working
Adding this to the page itself: (link to example)
<script type="text/javascript">
$('.default-value').each(function() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
}
});
$(this).blur(function() {
if(this.value == '') {
this.value = default_value;
}
});
});
</script>
Here is the HTML (It's in a form tag as well)
<!-- Address 2 -->
<div data-role="fieldcontain">
<label for="address-2">Address 2</label>
<input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #" />
</div>
For future generations: there's a thing called placeholder in HTML5
<input type="text" name="address-2" placeholder="Apt #, Suite #, Floor #" />
Placeholder is currently supported in newest webkit-based browsers.
I was able to get your code to work using jQuery 1.5 and jQuery Mobile 1.0a3. Did you include jQuery as well as jQuery Mobile? jQuery Mobile requires a version of jQuery to work.
Edit: I should note that I only tested this on the iPhone simulator, and not an actual device. The simulator was running iOS 4.0.1.
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script><script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.js" type="text/javascript"></script></head>
<div data-role="fieldcontain">
<label for="address-2">Address 2</label>
<input type="text" name="address-2" id="address-2" class="default-value" value="Apt #, Suite #, Floor #" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.default-value').each(function() {
var default_value = this.value;
$(this).focus(function() {
if(this.value == default_value) {
this.value = '';
}
});
$(this).blur(function() {
if(this.value == '') {
this.value = default_value;
}
});
});
});
</script>
Further to HTML5's input placeholder attribute, which behaves exactly as the helper text you describe; jQuery Mobile recommends using the label field with the class "ui-hidden-accessible":
For the sake of accessibility, jQuery Mobile requires that all form elements be paired with a meaningful label
http://jquerymobile.com/demos/1.1.0/docs/forms/docs-forms.html
You can then use Modernizr to detect the support for the placeholder attribute and if it is not supported, use a polyfill (like this one) or remove the ui-hidden-accessible class which will display the labels.
if(!Modernizr.input.placeholder){
$('label.ui-hidden-accessible')
.removeClass('ui-hidden-accessible')
.addClass('ui-accessible');
}
then style the new label as desired. I've found the polyfill approach doesn't work well when the input field is type="password", so unhiding the label is better in that case.
加载中,请稍侯......
精彩评论