Member Avatar for justinmyoung

Hi

I'm having trouble with a simple html form. I'm trying to have the input box read a simple message, such as "enter ticket number here", and allow the user to click anywhere within the input box to clear the message and begin entering their number.

The two problems I'm having, and I have no idea why, is

#1 clearing the message when a user clicks anywhere within the box

#2 allowing the user the ability to click anywhere within the box

I can get it to work outside the page that it's in now, but within the page it doesn't work at all.

I attached the file below

Thanks for any help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>

<link rel="stylesheet" href="" type="text/css" media="" />

<script language="javascript">AC_FL_RunContent = 0;</script>

<script src="slideshow/AC_RunActiveContent.js" language="javascript"></script>

</head>

<body>


<style>


/***********************BEGIN*****************/


body {
	font-size:12px;
	font-family: "Lucida Grande", sans-serif;
	background-color: #000;
	color: #fff8eb;
	text-align: center;	
	background: #5a5b5e url('images/bg.gif');
	padding: 50px 0 50px 0;
	margin: 0;		
	}

h1, h2, h3{
	padding: 0;
	margin: 0;
}

p{
	line-height:1.3em;
}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

li{
	margin: 0 0 0 0;
	padding: 0;
}

a:link{
	text-decoration: none;

}

a:hover{
	color: #808080;
}

.left{
	float: left;
}

.right{
	float: right;
}
	
.clear{
	clear: both;	
	overflow: hidden;
}
	
.inside{	/*other articles*/
	margin: 0px auto;
	border: 1px dotted #E1E6E5;
	background: #fafafa;
	padding: 10px 20px 0px 20px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
}



/******************CONTAINER********/


#container {
	
	width: 905px;
	text-align: left;
	margin: -5px auto ;	
	background: #fff;
	border: 10px solid #E1E6E5;
	padding: 0px;	
}

#header {
	width: 100%;	
}

#header .bottom li.selected a{
	color: #4b4a4a;
	background: #f1dab5;
	border: 1px solid #cacaca;
	border-bottom: 1px solid #808080;
	border-right: 1px solid #808080;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;	
	-webkit-border-radius: 3px;
	border-radius: 1px;	
}


#header .bottom {
	border: none;
	}

	#logo{
		width: 905px;
		height: 118px;
		float: left;
		background: #fff url('images/header2.gif') no-repeat;
		border: 1px solid blue;	
	}



/*******************NAV*************************/

	
#nav{	/*menu*/
	
	padding: 0px 0px 0px 0px;
	margin:3px 0px 16px 25px;	/*top,right,bottom,left*/	
	display: inline;
	float: left;
	width:540px;
	border: none;
}

	
#nav li {	
	float: left;
	background-color: #FBFFFB;
	
	
}

#nav li a:hover {
	background: #f1dab5;
}

#nav li a {

	margin: 9px 5px 0px 0px;
	padding: 9px 8px 9px 8px; /*nav box*/
    list-style: none;
	font-variant: small-caps;
	border: 1px solid #cacaca;
	border-bottom: 1px solid #808080;
	border-right: 1px solid #808080;
	font-family: georgia, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #5B5B5B;	
	text-decoration: none;
	display: block;	
	
	-moz-border-radius: 1px;
	-khtml-border-radius: 1px;	
	-webkit-border-radius: 1px;
	border-radius: 1px;	
	

}


#content { /*wraps around main content*/
	width: 592px;	
	float: left;
	margin: 0 0 0 25px;	
	display: inline;
}

#nav li.cart {
	border: none;
}


/**************SEARCH************************************/



#s { /*search box */

	background: #FBFFFB;
	border: thin solid #cacaca;

	margin-top: 139px;
	float: right;
	padding:0px;


	color: #808080;
	
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-webkit-border-radius: 10px;
	border-radius: 10px;


}

#searchsubmit{	/*status button */


	font-variant: small-caps;
	background-color: #fafafa;
	height: 38px;
	

	border: 1px solid #ccc;
	color: #8E0209;	
	
	cursor: auto;
	font-size:15px;
	position: absolute;
	
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-webkit-border-radius: 10px;
	border-radius: 10px;

}

#extraDiv1{
	position:absolute;
	top:194px;
	width:602px;
	height:220px;
	left:50%;
	
	
	margin-left:0px;
	background:url('') no-repeat;
	}

	* html #extraDiv1{
		position:absolute;
		}



/***********MAIN PICTURE/FIRST ARTICLE*******/


#slideshow .top{ 
	width: 577px;
	height: 200px;	
	
	
	padding: 0px;
	background: #000 url('') no-repeat;
	margin-left: 0px;
	margin-top: 0px;
	
	border-top: thin solid #262626;
	border-bottom: thin solid #262626;
	
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;	
	-webkit-border-radius: 0px;
	border-radius: 0px;
	
	
}
	

#slideshow .bottom {
	
	margin: 10px 16px 0 0;
	text-align: left;		
	padding: 20px 30px 15px 30px;
	background: #fafafa url('') no-repeat;
	border: 1px dotted #E1E6E5;
	
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;	
	-webkit-border-radius: 8px;
	border-radius: 3px;
		
}


/**************BIG EXCERPT**********************/


.bigExcerpt p{
	margin: 2px 0 0 0;	
	color: #4e4c4c;	/*color of text beneath picture*/
	display: inline-block;
	line-height: 1.9em;
	font-size: 14px;
	
}

.bigExcerpt h2{	 /*title text beneath picture*/
	margin: 0px 0px 10px 0;	
	color: #fbfffb;	
	font-family: "georgia", sans-serif;
	font-weight: normal;
	display: inline-block;
	letter-spacing:0px;
	line-height: 1.3em;
	
	
}

.bigExcerpt h2 a:link, .bigExcerpt h2 a:visited{	
	color: #990000; 									/*color of title beneath picture*/
	text-decoration: none;
	font-size: 22px; /*size of main header*/
}

.bigExcerpt h2 a:hover{	
	text-decoration: underline;	
}

.bigExcerpt .postMeta a:link, .bigExcerpt .postMeta a:visited{
	text-decoration: none;	
	color: #ccc;	
}

.bigExcerpt .date{
	font-family: Georgia, sans-serif;
	font-weight: normal;
	font-size: 12px;
	margin: 0 0 0 10px;
	float: left;
	
}

.bigExcerpt .commentCount{	
	margin: 0 0 0 0;
	padding: 0 0 0 17px;
	background: transparent url('images/comment_icon_sm_light.gif') 5px no-repeat;
	float: right;
}

.bigExcerpt h3{ /*In Inspiration header*/
	padding: 0 0 5px 0;
	font-size: 10px;
	background: transparent url('images/dot_border.gif') repeat-x bottom;
	margin: 0px 0px 15px 0;
	display: inline-block;
	width: 100%;
	color: #990000;	
	font-family: 'Lucida Grande', sans-serif;
	color: #990000;

	font-weight: normal;
	float: left;
}

.bigExcerpt  p a:link, .bigExcerpt a:visited{	
	color: #000;
	text-decoration: none;
}

.bigExcerpt  img{	
	border: none;
}

.bigExcerpt .more-link{
	display: none;
}

.bigExcerpt .moreLink{
	background: transparent url() no-repeat;
	padding: 3px 0 0 25px;
	margin: 5px 0 0 0;
	height: 21px;
	display: block;
	color: #990000;
	float: right;
	text-decoration: none;
	font-family: Georgia, sans-serif;
	font-size: 16px;	
}

.bigExcerpt .date, .otherArticle .date a:link{
	font-family: 'lucida grande', sans-serif;
	font-weight: normal;
	font-size: 10px;
	margin: 0 0 0 10px;
	float: right;
}


.post .inside{	
	margin: 0 0 0 30px;
	
}

.bigExcerpt .number{
	font-size: 35px;
}



/***********************THE OTHER ARTICLES****************/


#otherArticles{
	width: 650px;
	height: 590px;
	margin: 0px 0 0 0;
	
	
}

#otherArticles .otherArticle{
	width: 285px;
	height: 245px;
	text-align: center;
	float: left;
	margin: 0 8px 10px 0;
	display: inline;
	background: #fff;
	color: #4d4b47;	
	font-size: 11px;
		
	
}


#otherArticles .otherArticle .inside{
	width: 240px;
	height: 590px;
	text-align: left;
	overflow: hidden;
	margin: 17px auto;	
	
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;	
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.otherArticle .postMeta{
	font-family: 'Lucida Grande', sans-serif;
	color: #990000;
	font-size: 10px;
	font-weight: normal;
	float: left;
}

.otherArticle .postMeta a:link, .otherArticle .postMeta a:visited{
	text-decoration: none;	
	color: #c41616;	
}

.otherArticle .date, .otherArticle .date a:link{
	font-family: 'lucida grande', sans-serif;
	font-weight: normal;
	font-size: 10px;
	margin: 0 0 0 10px;
	float: left;
}

.otherArticle .commentCount{	
	margin: 0 0 0 0;
	padding: 0 0 0 17px;
	background: transparent url('') 5px no-repeat;
	float: right;
}

.otherArticle:link{	
	text-decoration: none;
	color: #4d4b47;
}

.otherArticle:hover{
	
	text-decoration: none;
	color: #4d4b47;	
	/*background-position: 0px -241px;*/
}


.otherArticle h2{
	font-size: 20px;
	font-family: 'lucida grande', sans-serif;
	font-variant: small-caps;
	margin: 0 0 10px 0;
	color: #808080;
}

.otherArticle h2 a:link, .otherArticle h2 a:visited{	
	color: #4d4b47;
	text-decoration: none;
}

.otherArticle h2 a:hover{	
	color: #c41616;
}

.otherArticle a:link, .otherArticle a:visited{
	color: #c41616;	
	text-decoration: none;
}

.otherArticle h3{
	padding: 2px 0 5px 0;
	font-size: 11px;
	background: transparent url('images/dot_border.gif') repeat-x bottom;
	margin: 2px 0px 8px 0;
}

.otherArticle .thumb{
	float: left;
	margin: 4px 10px 5px 0;
	border: 1px solid #808080;
	padding: 1px;
}

.otherArticle p{	
	margin: 0;
}

.otherArticle .more-link{
	display: none;
}

#paginationBar{
	background-color: #000;
	color: #fff;
	width: 577px;
	margin: 0 0 0 0;
	font-family: 'lucida grande', sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#paginationBar .inside{
	padding: 10px;
}

#paginationBar a:link, #paginationBar a:visited{	
	color: #fff;
	text-decoration: none;
}


/************SIDEBAR*********************/


#sidebar{	
	
	width: 260px;
	float: right;	
	margin: 0 25px 0 0;
	display: inline;
	
}


/**************ADS*******************/


#ads{
	
	font-size: 12px;
	line-height: 1.8em;		
	display: block;	
	height: 179px;
	color: #808080;
	
	
	border-top: thin solid #e3e1e1;
	border-bottom: thin solid #e3e1e1;
	border-right: 0px solid #ccc;
	border-left: 0px solid #ccc;
		
	-webkit-border-radius: 0px;
	padding: 10px;
	margin: 0 0 7px 0;
	background-color: #fafafa;
	
}

#ads .first_word {

	font-size: 13px;
	color: #990000;
	font-style: oblique;
	font-variant: small-caps;
	
}

#ads .moreLink {
	float: right;
	margin-top: 5px;
	color: #808080;
}


/************POPULAR ARTICLES***************/

#featuredProducts{	
	clear: both;
	border: 1px dotted #E1E6E5;
	border-bottom: 0px;
	margin: 15px 0 0 0;
	padding: 0px;
	background-color: #fafafa;
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;	
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

#featuredProducts h2{
	font-family: Georgia, sans-serif;	
	color: #3d3d3d;	
	padding: 10px 10px 10px 20px;
	font-size: 12px;
	margin: 0px 0 5px 0;
	background: #fafafa url('images/featured.jpg') bottom no-repeat;	
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;	
	-webkit-border-radius: 8px;
	border-radius: 3px;
}

#featuredProducts ul{
	list-style: none;
  • 3 Contributors
  • 4 Replies
  • 100 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by justinmyoung

Dani AI

Generated

Quick recap and a few robust options that address the remaining question about clearing a prompt inside an input (after discovered the overlay issue and demonstrated an inline onfocus fix).

Modern, simple approach: use the HTML5 placeholder attribute and keep a proper label for accessibility. The placeholder is shown visually but is not submitted as the field value.

<label for="ticket">Ticket number</label>
<input id="ticket" name="ticket" placeholder="Enter ticket number here" />

JavaScript fallback for older browsers or when a visible default value is required (feature-detect placeholder, clear only if the current value matches the default, restore on blur, and avoid destroying user input):

<script>
(function(){
  var input = document.getElementById('ticket');
  if (!('placeholder' in document.createElement('input'))) {
    var defaultVal = 'Enter ticket number here';
    input.value = defaultVal;
    input.addEventListener('focus', function(){
      if (this.value === defaultVal) this.value = '';
      // optionally: this.select();
    }, false);
    input.addEventListener('blur', function(){
      if (this.value === '') this.value = defaultVal;
    }, false);
  }
})();
</script>

Notes and troubleshooting tips: the overlay problem that hit is commonly caused by a sibling div or an absolutely positioned element with higher z-index — use the browser inspector to check element stacking, temporary background colors, or disable CSS rules to find the culprit. Prefer label + placeholder instead of relying only on placeholder for accessibility; consider this.select() on focus if replacing the default with a selection is preferable to outright clearing. Finally, ensure server-side validation does not treat the visual prompt as an actual submission.

Recommended Answers

All 4 Replies

Member Avatar for justinmyoung

Not two minutes after I posted this, I figured the problem out. I had an extra div tag that was covering the input box and only allowing the top portion of the box to be clicked in. I spent three hours on that one. fun stuff.

But the basic problem of clearing the text within the input box when a user clicks within it, I still don't know how to solve. If someone could help me with that one, I'd appreciate it.

Member Avatar for sreein1986

please send me the code

Thanx,
sree

Member Avatar for buddylee17

You want something like this? This textbox clears when the user clicks it.

<input type="text" onfocus="this.value=''; this.onfocus=null;" name="notes" value="enter ticket number here" />
commented: Good example, nice work :) +8
Member Avatar for justinmyoung

Thanks very much. That works great!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.