...

View Full Version : Resolved Clearable textbox



DJCMBear
08-31-2011, 11:39 PM
Hello

How am I able to add a a cross to the right of a textbox which once click it clears the text from the textbox, sort of like the way Google do it, I have been trying to do this for ages now and can't seem to find a way to do it.

Any help welcome, thank you.

- DJCMBear

Old Pedant
09-01-2011, 12:42 AM
??


<input name="godzilla" /><img src="cross.jpg" onclick="document.forms[0].godzilla.value='';"/>

Is that what you mean?

Or even


<input name="mothra" /><a href="#" onclick="document.forms[0].mothra.value='';return false;">X</a>

DJCMBear
09-01-2011, 01:42 AM
Yes basically I need to have every text input with the clasname 'Calendar' to dynamically insert a cross at the right end of the textbox that only shows when there is text in the textbox and once clicked it clears the textbox. I so hope this makes sense as I can't really make it any clearer as it is hard to describe lol.

Old Pedant
09-01-2011, 02:12 AM
Okay...*NOW* it works...


<html>
<head>
<script type="text/javascript">
function attachAll( )
{
var inps = document.getElementsByTagName("input");
for ( var i = 0; i < inps.length; ++i )
{
var inp = inps[i];
if ( inp.className == "Calendar" && inp.value != "" )
{
var image = document.createElement("img");
image.src = "cross.gif";
image.onclick =
function( )
{
this.previousSibling.value = '';
this.style.display = "none";
};
inp.parentNode.insertBefore( image, inp.nextSibling );
}
}
}
window.onload = attachAll;
</script>
</head>
<body>
<form>
<input name="one" value="no clear" /><br/>
<input name="two" class="Calendar" value="8/13/2011" /><br/>
<input name="three" class="Calendar" value="" /><br/>
<input name="four" class="Calendar" value="zamboni" /><br/>
</form>
</body>
</html>

DJCMBear
09-01-2011, 03:01 AM
Thanks, I am almost done with my edits and I will post back with the code for you to test out :)

DJCMBear
09-01-2011, 03:27 AM
Here you go a fully working example of what I wanted, Thanks bro for the head start :)



<!DOCTPYE html>
<html>
<head>
<title>Calendar Textbox Clearable</title>
<script type="text/javascript">
(function ($) {
"use strict";
$.Calendar = {
image: "http:\/\/viralpatel.net\/blogs\/demo\/jquery\/clearable-textboxes\/close-button.png",
init: function () {
var i, inps = $.document.getElementsByTagName("input");
for (i = 0; i < inps.length;) {
this.addImage(inps[i], i).addEvents(inps[i], i);
i = i + 1;
}
},
addEvents: function (inp, i) {
var that = this;
inp.onkeydown = function () { that.addImage(inp, i); };
inp.onkeyup = function () { that.addImage(inp, i); };
return (this);
},
addImage: function (inp, i) {
var id = 'CalendarClose_' + (i + 1),
image = $.document.createElement("a"),
check = $.document.getElementById(id);
if (inp.className === "Calendar" && inp.value !== "" && !check) {
image.style.background = "url(" + this.image + ") no-repeat";
image.style.fontSize = '8pt';
image.style.padding = '0 6px 0 6px';
image.style.margin = '-18px';
image.style.cursor = 'pointer';
image.id = id;
image.onclick = function () {
this.previousSibling.value = '';
this.parentNode.removeChild(this);
};
inp.parentNode.insertBefore(image, inp.nextSibling);
}
inp.style.padding = '0 15px 0 0';
return (this);
}
};
}(window));

window.onload = function () {
Calendar.init();
};
</script>
</head>
<body>
<form>
<input name="one" value="no clear" /><br/>
<input name="two" class="Calendar" value="8/13/2011" /><br/>
<input name="three" class="Calendar" value="" /><br/>
<input name="four" class="Calendar" value="zamboni" /><br/>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum