如何实现带有灰色文本提示的文本框? [英] How to Implement Text Box with Gray Text Hint?

问题描述

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

In many website, I can see text box with hint in gray text. The hint will tell the user what should be inputted and whenever user tries to input anything, the hint will disappear.

以下是它的示例:

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

I just wonder how to implement such a feature in Windows desktop application. I am using Delphi XE3 and it is possible to implement such a feature with TTextBox? Or is there such a VCL component available?

推荐答案

这是一个适用于 Windows XP(以及 Windows 7 和 8.1，尚未在 Windows 10 上进行测试)的实现.注意:我主要在 Windows XP 和 8.1 以及 Delphi 2007 和 XE2 中使用它.可能有我还没有看到的错误.

Here is an implementation that works for Windows XP (and also Windows 7 and 8.1, haven't tested it on Windows 10). Beware: I mostly use it in Windows XP and 8.1 and with Delphi 2007 and XE2. There may be bugs that I haven't seen yet.

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

It's also probably not the most elegant solution but it works and is easy to understand.

先决条件:Delphi 自定义容器包

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

Just save the following to u_dzCueEdit.dfm and u_dzCueEdit.pas, create a runtime package with it, create a corresponding design time package with a Register procedure and install it.

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;

pas file: 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.

这篇关于如何实现带有灰色文本提示的文本框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！