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

Question

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

下面是它的一个示例：

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

Answer 1

这是一个适用于 Windows XP（以及 Windows 7 和 8.1，尚未在 Windows 10 上测试过）的实现。注意：我主要在 Windows XP 和 8.1 以及 Delphi 2007 和 XE2 中使用它。可能有一些我还没有看到的错误。

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

先决条件：Delphi Custom Containers Pack

只需将以下内容保存到u_dzCueEdit.dfm和u_dzCueEdit.pas，用它创建一个运行时包，用Register过程创建一个对应的设计时包并安装它。

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 文件： 单元 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.