如何实现带有灰色文本提示的文本框？

Question

在许多网站中，我可以看到带有灰色文本提示文本框。提示将告诉用户应该输入什么，并且每当用户尝试输入任何内容时，提示都会消失。

下面是其中的一个示例：

​

​

我只是想知道如何在Windows桌面应用程序中实现这样的功能。我正在使用Delphi XE3，可以用TTextBox实现这样的功能吗？或者是否有这样的VCL组件可用？

Answer 1

这是一个适用于Windows XP的实现(以及Windows 7和8.1，尚未在Windows 10上进行测试)。注意:我主要在Windows XP和8.1以及Delphi2007和XE2中使用它。可能有一些我还没见过的bug。

这也可能不是最优雅的解决方案，但它是有效的，很容易理解。

前提条件：Delphi Custom Containers Pack

只需将以下代码保存到u_dzCueEdit.dfm和u_dzCueEdit.pas，使用它创建一个运行时包，使用注册过程创建一个相应的设计时包并安装它。

dfm文件：

object dzCueEdit: TdzCueEdit
  Left = 0
  Top = 0
  Width = 258
  Height = 21
  TabOrder = 0
  OnResize = BoxResize
  object ed_Cue: TEdit
    Left = 1
    Top = 1
    Width = 256
    Height = 19
    Align = alClient
    TabOrder = 0
    OnChange = ed_CueChange
    OnClick = ed_CueClick
    OnEnter = ed_CueEnter
    OnExit = ed_CueExit
  end
  object p_Cue: TPanel
    Left = 64
    Top = 0
    Width = 242
    Height = 21
    BevelOuter = bvNone
    Color = clMoneyGreen
    ParentBackground = False
    TabOrder = 1
    OnClick = p_CueClick
    OnEnter = p_CueEnter
    object l_Cue: TLabel
      AlignWithMargins = True
      Left = 88
      Top = 0
      Width = 93
      Height = 13
      Margins.Left = 1
      Margins.Top = 1
      Margins.Right = 1
      Margins.Bottom = 1
      Caption = 'Cue text goes here'
      Font.Charset = DEFAULT_CHARSET
      Font.Color = clGray
      Font.Height = -11
      Font.Name = 'Tahoma'
      Font.Style = []
      ParentFont = False
      OnClick = l_CueClick
    end
  end
end

pas文件: unit c_dzCueEdit；

interface

uses
  Windows,
  Messages,
  SysUtils,
  Classes,
  Graphics,
  Controls,
  Forms,
  Dialogs,
  ExtCtrls,
  StdCtrls,
  ccBoxes;

type
  TdzCueEdit = class(TBox)
    p_Cue: TPanel;
    l_Cue: TLabel;
    procedure ed_CueClick(Sender: TObject);
    procedure l_CueClick(Sender: TObject);
  published
    ed_Cue: TEdit;
    procedure p_CueEnter(Sender: TObject);
    procedure p_CueClick(Sender: TObject);
    procedure ed_CueChange(Sender: TObject);
    procedure ed_CueEnter(Sender: TObject);
    procedure ed_CueExit(Sender: TObject);
    procedure BoxResize(Sender: TObject);
  private
    procedure CheckCueBanner;
    function GetCue: string;
    function GetText: string;
    procedure SetCue(const _Value: string);
    procedure SetText(const _Value: string);
  protected
  public
    constructor Create(_Owner: TComponent); override;
  published
    property Text: string read GetText write SetText;
    property Cue: string read GetCue write SetCue;
  end;

implementation

{$R *.DFM}

{ TdzCueEdit }

constructor TdzCueEdit.Create(_Owner: TComponent);
begin
  inherited;
  BevelOuter := bvNone;
  l_Cue.Align := alClient;
  p_Cue.Color := ed_Cue.Color;
end;

procedure TdzCueEdit.BoxResize(Sender: TObject);
var
  Rect: TRect;
begin
  Rect := ed_Cue.ClientRect;
//  p_Cue.SetBounds(Rect.Left, Rect.Top, Rect.Right - Rect.Left, Rect.Bottom - Rect.Top);
  p_Cue.SetBounds(Rect.Left + 4, Rect.Top + 3, Rect.Right - Rect.Left - 2, Rect.Bottom - Rect.Top - 2);
end;

procedure TdzCueEdit.CheckCueBanner;
begin
  if ed_Cue.Text <> '' then
    p_Cue.Visible := False
  else begin
//    if ed_Cue.Focused then
//      p_Cue.Visible := False
//    else
      p_Cue.Visible := True;
  end;
end;

procedure TdzCueEdit.ed_CueChange(Sender: TObject);
begin
  CheckCueBanner;
end;

procedure TdzCueEdit.ed_CueClick(Sender: TObject);
begin
  CheckCueBanner;
end;

procedure TdzCueEdit.ed_CueEnter(Sender: TObject);
begin
  CheckCueBanner;
end;

procedure TdzCueEdit.ed_CueExit(Sender: TObject);
begin
  CheckCueBanner;
end;

function TdzCueEdit.GetCue: string;
begin
  Result := l_Cue.Caption;
end;

procedure TdzCueEdit.SetCue(const _Value: string);
begin
  l_Cue.Caption := _Value;
end;

function TdzCueEdit.GetText: string;
begin
  Result := ed_Cue.Text;
end;

procedure TdzCueEdit.l_CueClick(Sender: TObject);
begin
  ed_Cue.SetFocus;
  CheckCueBanner;
end;

procedure TdzCueEdit.SetText(const _Value: string);
begin
  ed_Cue.Text := _Value;
end;

procedure TdzCueEdit.p_CueClick(Sender: TObject);
begin
  ed_Cue.SetFocus;
  CheckCueBanner;
end;

procedure TdzCueEdit.p_CueEnter(Sender: TObject);
begin
  ed_Cue.SetFocus;
  CheckCueBanner;
end;

end.