Skip to content

Added an alternative implementation using a wrapper <span> (instead of absolute positioning, see issue #4) #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jkphl wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added an alternative implementation using a wrapper <span> (instead of absolute positioning, see issue #4) #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06aec11
Added an alternative implementation using a wrapper <span> (instead of
jkphl Dec 30, 2013
1a47f7e
Added readme section and demo for span-wrap.js
jkphl Jan 9, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions demos/span-wrap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!doctype html>
<html>
<head>
<title>Placeholder Demo (Span w/ wrapper)</title>
<style type="text/css">

* {
font-family: sans-serif;
font-size: 16px;
}

input[type=text],
button {
display: block;
margin: 10px;
padding: 4px;
border: 2px #ccc solid;
border-radius: 4px;
}

</style>
</head>
<body>
<h1>Placeholder Polyfill Demo (span-wrap.js)</h1>

<div id="inputs">
<input type="text" value="" placeholder="First" />
<input type="text" value="" placeholder="Second" />
<input type="text" value="" placeholder="Third" />
</div>

<button id="add-input">Add Input</button>

<script type="text/javascript" src="../src/span-wrap.js"></script>
<script type="text/javascript">

var inputs = document.getElementById('inputs');
var addButton = document.getElementById('add-input');

addButton.onclick = function() {
var input = document.createElement('input');
input.type = 'text';
input.placeholder = 'New Input';
inputs.appendChild(input);
document.placeholderPolyfill(input);
};

</script>
</body>
</html>
29 changes: 27 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,32 @@ A class is added to inputs that are currently displaying a placeholder as well a



### span-wrap.js

[download span-wrap.js](https://raw.github.com/UmbraEngineering/Placeholder/master/src/span-wrap.js) | [demo](http://umbraengineering.github.io/Placeholder/demos/span-wrap.html)

The `span-wrap.js` variant works almost identically as the `span.js` except that it's also creating a second `<span>` element wrapping both the placeholder span and the input field. This way, the placeholder automatically sticks to the position of the input field, whereas with `span.js` it is positioned absolutely on the page — which can lead to unexpected behavior in case of dynamic layout changes (e.g. when modifying element class names or style values). So basically,

```html
<form>
<input type="text" placeholder="My Field Placeholder" />
</form>
```

becomes

```html
<form>
<span style="position:relative">
<span style="position:absolute;display:none,margin:0,padding:0,cursor:text">My Field Placeholder</span>
<input type="text" placeholder="My Field Placeholder" />
</span>
</form>
```

Apart from that, there's no functional difference between `span-wrap.js` and `span.js` and the same caveats / notes apply here as well.


### ie-behavior.js

[download ie-behavior.js](https://raw.github.com/UmbraEngineering/Placeholder/master/src/ie-behavior.js) | [demo](http://umbraengineering.github.io/Placeholder/demos/ie-behavior.html)
Expand Down Expand Up @@ -138,5 +164,4 @@ The `ie-behavior-span.js` polyfill is a combination of the ideas behind the `spa
<script src="./ie-behavior-span.js"></script>
</body>
</html>
```

```
Loading