-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathREADME
106 lines (67 loc) · 4.5 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
# phImage 1.0 - jQuery Image Placeholder Plugin
A simple plugin allowing you to use images for placeholders in text fields & textareas with graceful fallback.
Browser Support: Firefox, Chrome, IE7+*, Safari, Opera
Requires: jQuery 1.7.2+
* Minor issue exists in IE8 - 10, see known issues below.
Author: Brett Marks (ai3 [at] internode.net.au)
Documentation can be found within the files you downloaded or at: https://github.com/cyphix333/phImage
##
## How to use:
##
1. Include jQuery in your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
2. Include the phImage plugin:
<script src="path/to/ph-image.min.js"></script>
3. Modify your html elements you want to apply a placeholder image to with a "data-ph-image" attribute, ie;
<input type="text" name="name" class="tb" placeholder="Name" data-ph-image="images/icon-person.png">
<input type="text" name="email" class="tb" placeholder="Email" data-ph-image="images/icon-mail.png">
<textarea name="msg" placeholder="Message" data-ph-image="images/icon-pencil.png"></textarea>
Note that it's best practice to give the `placeholder` attribute a value so it can be used for a graceful fallback.
4. Bind the plugin to the elements, ie:
$(document).ready(function() {
$('input.tb').phImage();
$('textarea').phImage({
remove_current: false,
background_position: '13px 10px'
});
});
That's it!
##
## Configuration options
##
### remove_current
Whether to remove the placeholder text or not.
default: true
options: true, false
### padding
The padding applied to the element(s) - Note that it's best to set the padding via your own CSS if setting `remove_current` to `false` because of some issues in IE.
default: 'default' (means it won't set any padding via the script)
options: Any valid padding value for the shorthand "padding" css property.
### background_position
The background position for the image.
default: null (no background position will be applied by the script)
options: Any valid background position value for the "background-position" css property.
### background_repeat
The background repeat setting for the image.
default: 'no-repeat'
options: Any valid background repeat value for the "background-repeat" css property.
##
## Known Issues
##
1. When setting `remove current` to `false` and hence causing the background images to remain when typing, Chrome will remove the background images and color the
background yellow when using their built-in "autofill" feature. I tried a couple of ways to fix this issue with no success; I did come up with another method, but it is
a bit convoluted, and since you can achieve the same affect with simple CSS I chose to bypass fixing it this way. If anyone has a simpler way to fix this issue,
please let me know.
2. When setting `remove current` to `false` AND setting `padding` via the options, there is an issue in IE versions 8 - 10, of which they all behave slightly differently:
IE8: When you preload the field with some data (such as a form submit error page) the text field (textareas aren't effected) will lose it's padding if it has the CSS
setting of `box-sizing: border-box` and has the doctype `<!DOCTYPE html>`; the outcome will be that the text will display on top of the background image; however once
the field gets focus again the padding is activated. To avoid this issue set the padding via your own CSS styles rather than via the options.
IE9: When you preload the field with some data (such as a form submit error page) the text field or textarea will lose it's padding if it has the CSS setting of
`box-sizing: border-box` and has the doctype `<!DOCTYPE html>`; with text fields the text will be hidden under the background image and with textareas the text will
display on top of the background image; however once the field gets focus again the padding is activated. To avoid this issue set the padding via your own CSS styles
rather than via the options.
IE10: When you preload the field with some data (such as a form submit error page) OR have text placeholders, the text field or textarea will lose it's padding if it
has the CSS setting of `box-sizing: border-box`; with text fields the text will be hidden under the background image and with textareas the text will display on top of
the background image; however once the field gets focus again the padding is activated. To avoid this issue set the padding via your own CSS styles rather than via
the options.
If anyone can figure out how to fix these issues feel free to push through a fix - it would be greatly appreciated!