HOWTO · Csharp

C#의 텍스트 상자에 자리 표시자 추가

이 자습서에서는 C#의 텍스트 상자에 자리 표시자를 추가하는 방법을 보여줍니다.

이 페이지의 내용

이 자습서에서는 C#에서 텍스트 상자에 자리 표시자를 추가하는 세 가지 방법을 설명합니다. 자리 표시자는 힌트로 취급되어야 하므로 labels 또는 title을 대체할 수 없습니다.

C#에서 자리 표시자 텍스트가 있는 텍스트 상자 만들기

사라지고 사용자가 텍스트를 입력할 수 있도록 하는 자리 표시자 텍스트가 있는 텍스트 상자를 만들면 개발자에게 완전한 사용자 지정의 자유를 제공합니다. 또한 양식 요소의 자리 표시자 텍스트에 스타일을 지정할 수 있습니다.

일반적으로 텍스트 상자에는 자리 표시자가 있습니다. 초점이 맞춰지면 사용자가 텍스트를 추가할 수 있도록 자리 표시자가 제거됩니다. 텍스트 상자가 포커스를 잃고 사용자가 텍스트를 입력하지 않은 경우 자리 표시자가 텍스트 상자에 다시 추가됩니다.

다음 C# 코드는 자리 표시자가 있는 텍스트 상자를 만듭니다.

Form1.Designer.cs:

// `Form1` as your C# project form
// `Form1.Designer.cs` Code to create a `PlaceholderTxtB` textbox

namespace TextboxPlaceholder {
  partial class Form1 {
    private System.ComponentModel.IContainer components = null;

    protected override void Dispose(bool disposing) {
      if (disposing && (components != null)) {
        components.Dispose();
      }
      base.Dispose(disposing);
    }

#region Windows Form Designer generated code

    private void InitializeComponent() {
      this.PlaceholderTxtB = new System.Windows.Forms.TextBox();
      this.button1 = new System.Windows.Forms.Button();
      this.SuspendLayout();
      //
      // PlaceholderTxtB
      //
      this.PlaceholderTxtB.Location = new System.Drawing.Point(12, 12);
      this.PlaceholderTxtB.Name = "PlaceholderTxtB";
      this.PlaceholderTxtB.Size = new System.Drawing.Size(188, 20);
      this.PlaceholderTxtB.TabIndex = 0;
      //
      // Create a `button1` button to lose focus from the `PlaceholderTxtB` textbox
      //
      this.button1.Location = new System.Drawing.Point(57, 39);
      this.button1.Name = "button1";
      this.button1.Size = new System.Drawing.Size(75, 23);
      this.button1.TabIndex = 1;
      this.button1.Text = "Focus";
      this.button1.UseVisualStyleBackColor = true;
      //
      // Form1
      //
      this.ClientSize = new System.Drawing.Size(284, 261);
      this.Controls.Add(this.button1);
      this.Controls.Add(this.PlaceholderTxtB);
      this.Name = "Form1";
      this.ResumeLayout(false);
      this.PerformLayout();
    }

#endregion

    private System.Windows.Forms.TextBox PlaceholderTxtB;
    private System.Windows.Forms.Button button1;
  }
}

Form1.cs:

// `Form1.cs` code to add a placeholder text to `PlaceholderTxtB` textbox

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

namespace TextboxPlaceholder {

  public partial class Form1 : Form {
    string ph = "Type your user name here...";

    public Form1() {
      InitializeComponent();
      PlaceholderTxtB.GotFocus += RemoveText;
      PlaceholderTxtB.LostFocus += AddText;
    }

    private void Form1_Load(object sender, EventArgs e) {}
    public void RemoveText(object sender, EventArgs e) {
      if (PlaceholderTxtB.Text == ph)
        PlaceholderTxtB.Text = "";
    }
    public void AddText(object sender, EventArgs e) {
      if (String.IsNullOrWhiteSpace(PlaceholderTxtB.Text)) {
        PlaceholderTxtB.ForeColor = Color.Gray;
        PlaceholderTxtB.Text = ph;
      }
    }
  }
}

Form1 로드 이벤트에는 PlaceholderTxtB 텍스트 상자를 생성하는 코드를 보유하는 InitializeComponent() 메서드가 포함되어 있습니다. Form1.cs에서 텍스트 상자의 .GotFocus 및 .LostFocus 이벤트를 만듭니다.

PlaceholderTxtB 텍스트 상자에 포커스가 있을 때마다 자리 표시자 텍스트가 제거됩니다. 그러나 텍스트 상자가 사용자 포커스를 잃고 비어 있으면 자리 표시자 텍스트가 다시 나타납니다.

Visual Studio IDE에서 Enter 및 Leave 포커스 이벤트를 사용하여 C#의 텍스트 상자에 자리 표시자 텍스트 추가

Visual Studio에서 양식의 각 구성 요소에는 이벤트가 있습니다. 텍스트 상자의 경우 C# 프로젝트 양식의 Properties에서 Focus 이벤트를 찾을 수 있습니다.

Enter 및 Leave 이벤트를 사용하여 텍스트 상자에 대한 자리 표시자를 만듭니다.

// `Form1.cs` code for `Enter Focus` and `Leave Focus` events to add a placeholder text to a
// `textBox1` textbox

string phd = "Password@123";

private void Enter_Focus(object sender, EventArgs e) {
  // textBox1.ForeColor = Color.Gray;
  if (textBox1.Text == phd)
    textBox1.Text = "";
}

private void Leave_Focus(object sender, EventArgs e) {
  textBox1.ForeColor = Color.Gray;
  if (textBox1.Text == "")
    textBox1.Text = phd;
}

textBox1.Text = phd는 입력이 비어 있고 사용자가 가능한 값을 제안하기 위해 텍스트 상자의 초점을 잃을 때 표시되는 자리 표시자 텍스트입니다. 텍스트 상자의 Enter_Focus 및 Leave_Focus 이벤트는 컨트롤에 텍스트가 없고 포커스가 없을 때 표시되는 자리 표시자 텍스트를 가져오거나 설정합니다.

Visual Studio에 Bunifu UI를 설치하여 C# 프로젝트에서 자리 표시자가 있는 텍스트 상자 추가

NuGet을 사용하여 Bunifu UI를 쉽게 설치하고 활성화하세요. Visual Studio IDE에서 NuGet은 애플리케이션을 원활하게 설치, 활성화 및 배포하는 더 빠르고 쉬운 방법을 제공합니다.

NuGet 패키지 관리자 콘솔을 통해 Bunifu UI를 설치하려면 다음을 실행하십시오.

Install-Package Bunifu.UI.WinForms

C# 프로젝트에서 Tools로 이동하고 Manage NuGet Packages for Solution...솔루션용 NuGet Package Manager를 클릭합니다. 그런 다음 NuGet - 솔루션 탭이 표시되고 찾아보기 섹션으로 이동하여 Bunifu를 검색합니다.

검색 결과에서 Bunifu.UI.WinForms 패키지를 찾아 설치할 수 있습니다. C# 프로젝트에 추가하면 Toolbar 탭에서 컨트롤 목록을 볼 수 있습니다.

미리 정의된 텍스트 자리 표시자가 있는 텍스트 상자를 제공합니다. C# Visual Studio 프로젝트의 Toolbox 내에서 BunifuTextBox를 찾아 양식으로 끌어다 놓습니다.

속성을 수정하여 사용자 지정하면 자리 표시자 텍스트가 있는 텍스트 상자가 생깁니다.

이 자습서에서는 사용자에게 보다 명확한 인터페이스를 제공하기 위해 텍스트 상자의 텍스트 영역에 자리 표시자 텍스트를 추가하는 세 가지 방법을 배웠습니다. 그러나 텍스트 상자에 레이블을 지정하는 다른 항목이 없는 경우 자리 표시자가 사라지면 혼란스러울 수 있습니다.

다행히도 이 튜토리얼에서 얻을 수 있는 솔루션을 사용하면 사용자가 텍스트 입력을 시작할 때까지 자리 표시자 텍스트가 유지됩니다. 인라인으로 자리 표시자는 텍스트 상자에 입력할 정보를 식별하여 접근성을 제한합니다.