Responsive Placeholder Text Plugin - jQuery Fitholder

File Size: 3.6 KB
Views Total: 480
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Placeholder Text Plugin - jQuery Fitholder

A jQuery plugin allows you to create responsive and flexible placeholder text across all screen sizes, ranging from desktop to mobile. 

While working on a responsive website, you might come across the problem that placeholder text can be too long for mobile screens or too concise for larger screens. 

Fitholder is a jQuery plugin developed exactly for such occasions by making the placeholder text responsive and flexible to the device size. This plugin allows you to set customized placeholder text of any length based on screen size (just like using CSS media queries). It is a delicious complement to any project that involves extensive input forms, as well as any mobile web experience.

How to use it:

1. Download and put the jquery.fitholder.js script after jQuery library (slim build is recommended).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.fitholder.js"></script>

2. Call the function on the target text field and define different placeholder text for different devices just like using CSS media queries.

<input id="example" type="text" placeholder="This is the default placeholder text" />
$('#example').fitholder({
  "(min-width: 300px)": 'Placeholder Text',
  "(min-width: 700px)": 'Short Placeholder Text',
  "(min-width: 1000px)": 'This is the default placeholder text'
});

3. Call the function on the target text field and define different placeholder text for different devices just like using CSS media queries.

<input id="example" type="text" placeholder="This is the default placeholder text" />
$('#example').fitholder({
  "(min-width: 300px)": 'Placeholder Text',
  "(min-width: 700px)": 'Short Placeholder Text',
  "(min-width: 1000px)": 'This is the default placeholder text'
});

4. Or define the rules in the data-fitholder attribute:

<input id="example" 
       type="text" 
       placeholder="This is the default placeholder text"
       data-fitholder='{
        "(min-width: 300px)":"Placeholder Text",
        "(min-width: 700px)":"Short Placeholder Text",
        "(min-width: 1000px)":"This is the default placeholder text"}' />

This awesome jQuery plugin is developed by hotmeteor. For more Advanced Usages, please check the demo page or visit the official website.