2010-03-21 4 views
31

Affichage "Tapez ici pour ..." jusqu'à ce que l'utilisateur entre le texte dans un TextBox est une fonctionnalité d'utilisation bien connue de nos jours. Comment pourrait-on implémenter cette fonctionnalité en C#?Comment implémenter un TextBox qui affiche "Tapez ici"?

Mon idée est de passer outre OnTextChanged, mais la logique de gérer les changements de texte et de « Entrez ici » est un peu délicat ...

Affichage « Entrez ici » lors de l'initialisation et le supprimer à la première entrée est facile, mais je veux afficher le message chaque fois que le texte entré devient vide.

+0

est ce formulaire ASP.NET ou Windows? – M4N

+0

Quelle technologie vous intéresse? ASP.NET, Winforms ou WPF, et peut-être Silverlight? De toute façon, il est appelé "Watermark textbox" et vous pouvez trouver beaucoup sur chacune des technologies. – Shimmy

+0

WinForms. - Ah, je ne savais pas ce terme. Merci! – mafu

Répondre

20

Qu'est-ce que vous cherchez est un TexBox avec « filigrane »

Il y a un exemple d'implémentation pour here C#.

Hope it helps

0

Vous pouvez dessiner chaîne « Tapez ici » à l'arrière-plan textbox jusqu'à ce qu'il vide

1

gérer l'événement de mise au point perdu et si le texte de la propriété est vide, remplissez-le avec votre chaîne par défaut.

+0

Je gère également l'événement click pour effacer le texte de la zone de texte. – Anibalismo

0

Si ceci est pour ASP.NET, vous pouvez essayer TextBoxWatermark.

S'il s'agit de Windows Forms, la réponse est déjà here dans SO.

0

Pourquoi utiliser OnTextChanged? Je suggère de supprimer le texte "Tapez ici" lorsque le TextBox obtient le focus. Lorsque le contrôle perd le focus et qu'aucun texte n'est entré, vous pouvez afficher à nouveau le texte.

Même résultat et pas besoin de logique délicate.

1

Si cela est ASP.NET (par opposition à WinForms), vous pouvez le faire:

Si vous utilisez jQuery, ajoutez à votre document prêt (ou cependant vous initialisez votre page):

var $textbox = $("textbox selector"); // assumes you select a single text box 
if ($textbox.val() == "") { 
    $textbox.val("Type here to..."); 
    $textbox.one('focus', function() { 
    $(this).attr('value', ''); 
    }); 
} 

Vous aurez besoin de faire un petit refactoring si vous sélectionnez plus d'une zone de texte (mettez l'instruction if à l'intérieur d'un chaque sur l'élément).

30

Quelque chose qui a fonctionné pour moi:

this.waterMarkActive = true; 
this.textBox.ForeColor = Color.Gray; 
this.textBox.Text = "Type here"; 

this.textBox.GotFocus += (source, e) => 
    { 
    if (this.waterMarkActive) 
    { 
     this.waterMarkActive = false; 
     this.textBox.Text = ""; 
     this.textBox.ForeColor = Color.Black; 
    } 
    }; 

this.textBox.LostFocus += (source, e) => 
    { 
    if (!this.waterMarkActive && string.IsNullOrEmpty(this.textBox.Text)) 
    { 
     this.waterMarkActive = true; 
     this.textBox.Text = "Type here"; 
     this.textBox.ForeColor = Color.Gray; 
    } 
    }; 

bool waterMarkActive est une variable membre de classe et textBox est le TextBox. Cela devrait probablement être encapsulé cependant :) Il pourrait y avoir quelques problèmes avec cette approche, mais je n'en connais actuellement aucun.

J'ai récemment découvert que Windows supporte les marques d'eau dans les zones de texte; ils sont appelés des bannières de repère (voir here).Il est très facile à mettre en œuvre:

// Within your class or scoped in a more appropriate location: 
[DllImport("user32.dll")] 
private static extern IntPtr SendMessage(IntPtr hWnd, int Msg, int wParam, [MarshalAs(UnmanagedType.LPWStr)] string lParam); 

// In your constructor or somewhere more suitable: 
SendMessage(textBox.Handle, 0x1501, 1, "Please type here."); 

textBox est une instance de TextBox, 0x1501 est le code du message Windows EM_SETCUEBANNER, le wParam peut être soit TRUE (non nul) ou FALSE (zéro), et lParam est la marque d'eau que vous souhaitez afficher. wParam indique quand la bannière cue doit être affichée; Si elle est définie sur TRUE, la bannière de repère s'affiche même si la commande est active.

+2

Aimez ce 'DllImport'! Merci de l'avoir posté. – Kristopher

+0

cela devrait être la réponse acceptée. cue bannières idée est bonne .. –

+0

bannière bannière ne fonctionnera pas si vous utilisez la zone de texte multiligne. – 123iamking

8

Basé sur la réponse de @ Pooven (merci!), J'ai créé cette classe. Travaille pour moi.

/// <summary> 
/// A textbox that supports a watermak hint. 
/// </summary> 
public class WatermarkTextBox : TextBox 
{ 
    /// <summary> 
    /// The text that will be presented as the watermak hint 
    /// </summary> 
    private string _watermarkText = "Type here"; 
    /// <summary> 
    /// Gets or Sets the text that will be presented as the watermak hint 
    /// </summary> 
    public string WatermarkText 
    { 
     get { return _watermarkText; } 
     set { _watermarkText = value; } 
    } 

    /// <summary> 
    /// Whether watermark effect is enabled or not 
    /// </summary> 
    private bool _watermarkActive = true; 
    /// <summary> 
    /// Gets or Sets whether watermark effect is enabled or not 
    /// </summary> 
    public bool WatermarkActive 
    { 
     get { return _watermarkActive; } 
     set { _watermarkActive = value; } 
    } 

    /// <summary> 
    /// Create a new TextBox that supports watermak hint 
    /// </summary> 
    public WatermarkTextBox() 
    { 
     this._watermarkActive = true; 
     this.Text = _watermarkText; 
     this.ForeColor = Color.Gray; 

     GotFocus += (source, e) => 
     { 
      RemoveWatermak(); 
     }; 

     LostFocus += (source, e) => 
     { 
      ApplyWatermark(); 
     }; 

    } 

    /// <summary> 
    /// Remove watermark from the textbox 
    /// </summary> 
    public void RemoveWatermak() 
    { 
     if (this._watermarkActive) 
     { 
      this._watermarkActive = false; 
      this.Text = ""; 
      this.ForeColor = Color.Black; 
     } 
    } 

    /// <summary> 
    /// Applywatermak immediately 
    /// </summary> 
    public void ApplyWatermark() 
    { 
     if (!this._watermarkActive && string.IsNullOrEmpty(this.Text) 
      || ForeColor == Color.Gray) 
     { 
      this._watermarkActive = true; 
      this.Text = _watermarkText; 
      this.ForeColor = Color.Gray; 
     } 
    } 

    /// <summary> 
    /// Apply watermak to the textbox. 
    /// </summary> 
    /// <param name="newText">Text to apply</param> 
    public void ApplyWatermark(string newText) 
    { 
     WatermarkText = newText; 
     ApplyWatermark(); 
    } 

} 
3

Je viens juste de commencer à apprendre C# ce semestre, donc je ne suis pas un expert, mais cela a fonctionné pour moi: (Ceci utilise des formes de fenêtres)

private void Form1_Load(object sender, EventArgs e) 
{ 
    textBox1.SelectionStart = 0; //This keeps the text 
    textBox1.SelectionLength = 0; //from being highlighted 
    textBox1.ForeColor = Color.Gray; 
} 

private void textBox_MouseMove(object sender, MouseEventArgs e) 
{ 
    Cursor.Current = Cursors.IBeam; //Without this the mouse pointer shows busy 
} 

private void textBox1_KeyDown(object sender, KeyEventArgs e) 
{ 
    if (textBox1.Text.Equals("Type here...") == true) 
    { 
     textBox1.Text = ""; 
     textBox1.ForeColor = Color.Black; 
    } 
} 

private void textBox1_KeyUp(object sender, KeyEventArgs e) 
{ 
    if (textBox1.Text.Equals(null) == true || textBox1.Text.Equals("") == true) 
    { 
     textBox1.Text = "Type here..."; 
     textBox1.ForeColor = Color.Gray; 
    } 
} 
0

produit une sortie To HTML WATERMARK

Voici mon code pour le texte "filigrane" ou "aperçu" du texte - fonctionne très bien! Utilisation de l'application Windows Forms REMARQUE: Cet exemple a trois zones de texte, chacune ayant la méthode ci-dessous pour l'événement "mouse leave" et l'événement "mouse enter" respectivement.

private void textBoxFav_Leave(object sender, EventArgs e) { 
    TextBox textbox = (TextBox)sender; 
    if (String.IsNullOrWhiteSpace(textbox.Text)) { 
    textbox.ForeColor = Color.Gray; 
    if (textbox.Name == "textBoxFavFood") { 
     textbox.Text = "Favorite Food"; 
    } 
    else if (textbox.Name == "textBoxFavDrink") { 
     textbox.Text = "Favorite Drink"; 
    } 
    else if (textbox.Name == "textBoxFavDesert") { 
     textbox.Text = "Favorite Desert"; 
    } 
    } 
    else { 
    textbox.ForeColor = Color.Black; 
    } 
} 

private void textBoxFav_Enter(object sender, EventArgs e) { 
    TextBox textbox = (TextBox)sender; 
    if (textbox.Text == "Favorite Food" || textbox.Text == "Favorite Drink" || textbox.Text == "Favorite Desert") { 
    textbox.Text = ""; 
    textbox.ForeColor = Color.Black; 
    } 
} 
3
[DllImport("user32.dll", CharSet = CharSet.Auto)] 
    private static extern Int32 SendMessage(IntPtr hWnd, int msg, int wParam, [MarshalAs(UnmanagedType.LPWStr)]string lParam); 
    const int EM_SETCUEBANNER = 0x1501; 

    public Form1() 
    { 
     InitializeComponent(); 
     SendMessage(textBox1.Handle, EM_SETCUEBANNER, 1, "Username"); 
     SendMessage(textBox2.Handle, EM_SETCUEBANNER, 1, "Password"); 
    } 
+1

const int EM_SETCUEBANNER = 0x1501; – bitrixhater

+0

fusionné votre commentaire dans le code, merci pour l'entrée .. –

0

Dans la dernière version de C# la zone de texte a la propriété PlaceholderText, qui fait tout le travail. Il vous suffit donc de définir "Tapez ici ..." comme valeur de cette propriété.

+0

Pense que tu vas devoir nous montrer un lien MSDN pour celui-ci, parce que j'ai du mal à trouver quelque chose dans les docs pour le sauvegarder. –

0

Si vous voulez éviter les problèmes de redimensionnement des contrôles et de liaison des données et rendre le code plus simple (ok, c'est discutable), vous pouvez simplement utiliser une étiquette et basculer sa visibilité. Puis

private void FilterComboBox_GotFocus(object sender, EventArgs e) 
    { 
     FilterWatermarkLabel.Visible = false; 
    } 

    private void FilterComboBox_LostFocus(object sender, EventArgs e) 
    { 
     if (!FilterWatermarkLabel.Visible && string.IsNullOrEmpty(FilterComboBox.Text)) 
     { 
      FilterWatermarkLabel.Visible = true; 
     } 
    } 

Une autre approche pour les images et aussi d'éviter la liaison de données est ici problèmes https://msdn.microsoft.com/en-us/library/bb613590(v=vs.100).aspx

0

Basé sur @ réponse de Joël. Je fixe sa classe (merci pour la base!)

/// <summary> 
/// A textbox that supports a watermak hint. 
/// Based on: https://stackoverflow.com/a/15232752 
/// </summary> 
public class WatermarkTextBox : TextBox 
{ 
    /// <summary> 
    /// The text that will be presented as the watermak hint 
    /// </summary> 
    private string _watermarkText; 

    /// <summary> 
    /// Gets or Sets the text that will be presented as the watermak hint 
    /// </summary> 
    public string WatermarkText 
    { 
     get { return _watermarkText; } 
     set { _watermarkText = value; } 
    } 

    /// <summary> 
    /// Whether watermark effect is enabled or not 
    /// </summary> 
    private bool _watermarkActive; 
    /// <summary> 
    /// Gets or Sets whether watermark effect is enabled or not 
    /// </summary> 
    public bool WatermarkActive 
    { 
     get { return _watermarkActive; } 
     set { _watermarkActive = value; } 
    } 

    /// <summary> 
    /// Create a new TextBox that supports watermak hint 
    /// </summary> 
    public WatermarkTextBox() 
    { 
     this.WatermarkActive = _watermarkActive; 
     this.Text = _watermarkText; 
    } 

    protected override void OnCreateControl() 
    { 
     base.OnCreateControl(); 
     if (this.WatermarkActive) 
      CheckWatermark(); 
    } 

    protected override void OnGotFocus(EventArgs e) 
    { 
     base.OnGotFocus(e); 
     CheckWatermark(); 
    } 

    protected override void OnLostFocus(EventArgs e) 
    { 
     base.OnLostFocus(e); 
     CheckWatermark(); 
    }   

    public void CheckWatermark() 
    { 
     if ((this.WatermarkActive) && String.IsNullOrWhiteSpace(this.Text)) 
     { 
      ForeColor = Color.Gray; 
      this.Text = _watermarkText; 
     } 
     else if ((this.WatermarkActive) && (!String.IsNullOrWhiteSpace(this.Text))) 
     { 
      if (this.Text == _watermarkText) 
       this.Text = ""; 
      ForeColor = Color.Black; 
     } 
     else 
      ForeColor = Color.Black; 
    } 
} 
0

Sur la base de réponse de l'utilisation Ahmed Soliman Flasha classe suivante:

public class TextBoxHint : TextBox 
{ 
    string _hint; 

    [Localizable(true)] 
    public string Hint 
    { 
     get { return _hint; } 
     set { _hint = value; OnHintChanged(); } 
    } 

    protected virtual void OnHintChanged() 
    { 
     SendMessage(this.Handle, EM_SETCUEBANNER, 1, _hint); 
    }  

    const int EM_SETCUEBANNER = 0x1501; 

    [DllImport("user32.dll", CharSet = CharSet.Auto)] 
    private static extern Int32 SendMessage(IntPtr hWnd, int msg, int wParam, [MarshalAs(UnmanagedType.LPWStr)]string lParam); 
} 
0

Affichage "Tapez ici pour ..." jusqu'à ce que l'utilisateur écrit du texte dans un TextBox est une fonctionnalité d'utilisabilité bien connue de nos jours. Comment pourrait-on implémenter cette fonctionnalité en C#?

  1. Set TextBox.Text comme « Tapez ici pour ..."

  2. créer un événement, par exemple box_click()

  3. -> Mettez ce code dans votre méthode

    private void box_Click(object sender, EventArgs e) 
    { 
        Textbox b = (Textbox)sender; 
        b.Text = null; 
    } 
    
  4. assignez maintenant cette méthode pour "l'événement Enter" votre zone de texte (peut-être un ou plusieurs)

Questions connexes