grey hint text in a field

How to implement the deemphasized seed text in a fill in field

Page 1 of 1

6 Replies - 10559 Views - Last Post: 13 January 2010 - 11:19 PM Rate Topic: -----

#1 codetonic  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 46
  • Joined: 13-May 09

grey hint text in a field

Posted 12 January 2010 - 09:53 AM

For example, the "Google Custom Search" text in the yellow 'Read this First' box.
What do call that text?
Seed text?
Hint text?
Start here?

Then when you click in the field to enter your query, the text is removed.
How can I implement that technique in a C#/.NET text field?

Sorry, should have included some examples:

I tried setting the font color and setting the text:
myField.ForeColor = Color.gray;
myField.Text = "Enter a name here";

Then when the field becomes active:

myField.ForeColor = Color.black;
myField.Text = "";

But saw no effect.

Is This A Good Question/Topic? 0
  • +

Replies To: grey hint text in a field

#2 FlashM  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 382
  • View blog
  • Posts: 1,195
  • Joined: 03-December 09

Re: grey hint text in a field

Posted 12 January 2010 - 12:00 PM

Here is my try. The only thing is that the textbox in question should not be the one that is focused when application is started.


using System;
using System.Drawing;
using System.Windows.Forms;

namespace TextboxSample
{
	public partial class Form1 : Form
	{
		public Form1()
		{
			InitializeComponent();

			inputTextBox.ForeColor = Color.Gray;
			inputTextBox.Text = "Enter a name here";
			inputTextBox.Select(inputTextBox.TextLength, 0);
		}

		private void inputTextBox_Enter(object sender, EventArgs e)
		{
			inputTextBox.Clear();
			inputTextBox.ForeColor = Color.Black;
		}
	}
}


Hope this helps.

This post has been edited by FlashM: 12 January 2010 - 12:01 PM

Was This Post Helpful? 1
  • +
  • -

#3 finaiized  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 84
  • Joined: 29-November 09

Re: grey hint text in a field

Posted 12 January 2010 - 10:12 PM

Instead of checking if the textbox has focus, I've used the Click method:
private void textBox1_Click(object sender, EventArgs e)
		{
			textBox1.Clear();
			textBox1.ForeColor = Color.Black;
		}
.

Make sure you link this method to your textbox.
I've also used TextChanged in the below example:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
	public partial class Form1 : Form
	{
		int i = 0;
		public Form1()
		{
			InitializeComponent();
			textBox1.Text = "click here";
			textBox1.ForeColor = Color.Gray;
			textBox1.Select(textBox1.TextLength, 0);
			textBox1.TextChanged += new EventHandler(textBox1_TextChanged);
		}

		void textBox1_TextChanged(object sender, EventArgs e)
		{
			if (i == 0)
			{
				textBox1.Clear();
				textBox1.ForeColor = Color.Black;
				i++;
				button1.Text = i.ToString();
			}
			else
			{
				return;
			}
		}

		private void textBox1_Click(object sender, EventArgs e)
		{
			textBox1.Clear();
			textBox1.ForeColor = Color.Black;
		}
	}
}

Was This Post Helpful? 1
  • +
  • -

#4 TravisP  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 35
  • Joined: 06-January 10

Re: grey hint text in a field

Posted 13 January 2010 - 12:11 AM

If you were solely relying on the click action what would happen if they tabbed into the textbox O_O?
Was This Post Helpful? 0
  • +
  • -

#5 FlashM  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 382
  • View blog
  • Posts: 1,195
  • Joined: 03-December 09

Re: grey hint text in a field

Posted 13 January 2010 - 01:22 AM

That's exactly why I used the Enter method, which works for a mouse click, tab enter and also works on touch screens.
Was This Post Helpful? 0
  • +
  • -

#6 finaiized  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 84
  • Joined: 29-November 09

Re: grey hint text in a field

Posted 13 January 2010 - 05:01 PM

View PostTravisP, on 12 Jan, 2010 - 11:11 PM, said:

If you were solely relying on the click action what would happen if they tabbed into the textbox O_O?

Nothing. The gray text would still be there. That's why I used the textchanged event. When they start typing, the text would be gone and replaced with your writing.
Was This Post Helpful? 0
  • +
  • -

#7 codetonic  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 46
  • Joined: 13-May 09

Re: grey hint text in a field

Posted 13 January 2010 - 11:19 PM

Thanks for both examples.
Enter and Click work.
I'll keep an eye on them both to see if there are behavioral differences over time.

Well done.

View Postcodetonic, on 13 Jan, 2010 - 10:17 PM, said:

Thanks for both examples.
Enter and Click work.
I'll keep an eye on them both to see if there are behavioral differences over time.

Well done.

Still don't know what to call this technique.
It seems to have become popular in the last year or so.

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1