Skip to content

Instantly share code, notes, and snippets.

@mollwe

mollwe/jquery.fieldselection.js

Created November 7, 2012 10:41
Show Gist options
  • Save mollwe/4030803 to your computer and use it in GitHub Desktop.
Save mollwe/4030803 to your computer and use it in GitHub Desktop.
Download ZIP
Enables placeholder for browsers without placeholder support
Raw
jquery.fieldselection.js
/*!
* jQuery plugin: fieldSelection - v0.1.0 - last change: 2006-12-16
* (c) 2006 Alex Brem <[email protected]> - http://blog.0xab.cd
*
* Modified 2012-11-07 by Adam Ydenius <[email protected]> http://mollwe.se
*/
/*
* Fixed some issues and proxying calls to original select if no parameters or callback.
* Keeping original as _select
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
} (function ($) {
var _select = $.fn.select;
var fieldSelection = {
_select: _select,
getSelection: function () {
var e = this.jquery ? this[0] : this;
return (
/* mozilla / dom 3.0 */
('selectionStart' in e && function () {
var l = e.selectionEnd - e.selectionStart;
return { start: e.selectionStart, end: e.selectionEnd, length: l, text: e.value.substr(e.selectionStart, l) };
}) ||
/* exploder */
(document.selection && function () {
//e.focus();
var r = document.selection.createRange();
if (r == null) {
return { start: 0, end: e.value.length, length: 0 }
}
var re = e.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return { start: rc.text.length, end: rc.text.length + r.text.length, length: r.text.length, text: r.text };
}) ||
/* browser not supported */
function () {
return { start: 0, end: e.value.length, length: 0 };
}
)();
},
replaceSelection: function () {
var e = this.jquery ? this[0] : this;
var text = arguments[0] || '';
return (
/* mozilla / dom 3.0 */
('selectionStart' in e && function () {
e.value = e.value.substr(0, e.selectionStart) + text + e.value.substr(e.selectionEnd, e.value.length);
return this;
}) ||
/* exploder */
(document.selection && function () {
e.focus();
document.selection.createRange().text = text;
return this;
}) ||
/* browser not supported */
function () {
e.value += text;
return this;
}
)();
},
select: function (start, end) {
if (isNaN(start)) {
return _select.call(this, arguments);
}
else {
return this.each(function () {
if (this.createTextRange) {
var selRange = this.createTextRange();
if (end === undefined || start == end) {
selRange.move("character", start);
selRange.select();
} else {
selRange.collapse(true);
selRange.moveStart("character", start);
selRange.moveEnd("character", end);
selRange.select();
}
} else if (this.setSelectionRange) {
this.setSelectionRange(start, end || start);
} else if (this.selectionStart) {
this.selectionStart = start;
this.selectionEnd = end;
}
});
}
}
};
jQuery.each(fieldSelection, function (i) { jQuery.fn[i] = this; });
}));
Raw
jquery.placeholder.css
::-webkit-input-placeholder
{
color: #aaa;
}
:-moz-placeholder
{
color: #aaa;
}
:ms-input-placeholder
{
color: #aaa;
}
.placeholder
{
color: #aaa !important;
}
Raw
jquery.placeholder.html
<html>
<head>
<title>jquery.placeholder.js</title>
<link rel="stylesheet" type="text/css" href="jquery.placeholder.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fieldselection.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":input[placeholder]").placeholder();
});
</script>
</head>
<body>
<input type="text" placeholder="jquery.placeholder.js" />
</body>
</html>
Raw
jquery.placeholder.js
/*!
* jquery.placeholder.js - v 0.1 (2012-11-07)
* Copyright (C) 2012 by Adam Ydenius ([email protected]) | http://mollwe.se
* Dual licensed under MIT and GPL.
*/
/*
* Enables placeholder for browsers without placeholder support. Other browsers
* use the internal placeholder support. Unlike others this plugin imitates
* Google Chrome placeholder, i.e. placeholder visible even when focused when
* input is empty.
*
* Inputs that has been enabled with this plugin has class "hasPlaceholder" and
* when placeholder is visible it also has class "placeholder".
*
* To enable plugin call placeholder on the elements you would like to support.
* Example: $(":input[placeholder]").placeholder();
*
* Dependencies:
* jquery 1.6+ (:focus)
* jquery.fieldselection - For setting cursor at start on click etc.
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
} (function ($) {
$.support.placeholder = (function () {
var test = document.createElement('input');
return ('placeholder' in test);
})();
if (!$.support.placeholder) {
var placeholderClass = "placeholder",
hasPlaceholderClass = "hasPlaceholder";
function _hide($input) {
$input.removeClass(placeholderClass);
}
function _show($input, placeholder) {
$input._val(placeholder).addClass(placeholderClass).filter(":focus").select(0);
}
$.fn._val = $.fn.val;
$.fn.val = function (value) {
if (value === undefined) { // GET
return this.hasClass(placeholderClass) ? "" : $.fn._val.apply(this, arguments);
}
else { // SET
if (this.hasClass(hasPlaceholderClass)) {
if (!value) {
_show(this, this.attr("placeholder"));
return this;
}
_hide(this);
}
return $.fn._val.apply(this, arguments);
}
};
$.fn.placeholder = function () {
return this.each(function () {
var $input = jQuery(this).addClass(hasPlaceholderClass),
placeholder = $input.attr('placeholder'),
$form = jQuery(this.form),
$win = jQuery(window);
// only apply logic if the element has the attribute
if (placeholder) {
function hide() {
if ($input.hasClass(placeholderClass)) {
$input._val('');
_hide($input);
}
}
function update() {
if ($input.val()) {
_hide($input);
}
else {
_show($input, placeholder);
}
}
function resetFocus() {
if ($input.hasClass(placeholderClass)) {
$input.select(0);
}
}
function resetClick(e) {
if ($input.hasClass(placeholderClass)) {
$input.select(0);
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
}
function resetKey(e) {
if ($input.hasClass(placeholderClass)) {
if ($.inArray(e.which, [8, 13, 19, 35, 36, 37, 38, 39, 40, 46, 91, 93, 224]) >= 0) {
$input.select(0);
e.preventDefault();
}
}
else {
update();
}
}
$input.on("blur.placeholder", update)
.on("focus.placeholder select.placeholder", resetFocus)
.on("click.placeholder", resetClick)
.on("keydown.placeholder keyup.placeholder", resetKey)
.on("keypress.placeholder paste.placeholder", hide);
update();
$form.on("submit.placeholder", hide); // clear the pre-defined text when form is submitted
$win.on("unload.placeholder beforeunload.placeholder", hide); // handles Firefox's autocomplete
}
});
}
}
else {
$.fn.placeholder = function () { return this; };
}
}));
@mollwe
Copy link
Author

mollwe commented Nov 9, 2012

Now with optional amd support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment