2010-03-21 24 views
31

mostrar "Tipo aquí para ..." hasta que el usuario introduce texto en un TextBox es una característica usabilidad conocida hoy en día. ¿Cómo se implementaría esta función en C#?¿Cómo implemento un TextBox que muestra "Escriba aquí"?

Mi idea es reemplazar OnTextChanged, pero la lógica para manejar los cambios de texto desde y hacia "Tipo aquí" es un poco complicado ...

Viendo "Tipo aquí" en la inicialización y eliminarlo en la primera entrada es fácil, pero quiero mostrar el mensaje cada vez que el texto ingresado se vacíe.

+0

es esto ASP.NET o formularios de Windows? – M4N

+0

¿En qué tecnología está interesado? es ASP.NET, winforms o WPF, y tal vez Silverlight? De cualquier manera se llama "Cuadro de texto de marca de agua" y puede encontrar montones en cada una de las tecnologías. – Shimmy

+0

WinForms. - Ah, no sabía ese término. ¡Gracias! – mafu

Respuesta

20

Lo que estás buscando es un TexBox con "marca de agua "

Hay una implementación de ejemplo para C# here.

creo que sirve

0

Puede dibujar cadena "Escribe aquí" al fondo de texto hasta que se vacía

1

controlar el evento pierde el foco y si el texto propiedad está vacía, llenarlo con su cadena por defecto.

+0

También manejo el evento click para borrar el texto del cuadro de texto. – Anibalismo

0

Si esto es para ASP.NET entonces puede intentar TextBoxWatermark.

Si esto es para Windows Forms, esto ya está contestada en here SO.

0

¿Por qué usar OnTextChanged? Sugiero eliminar el texto "Escribir aquí" cuando TextBox obtiene el foco. Cuando el control pierde el foco y no se ingresa texto, puede volver a mostrar el texto.

mismo resultado y sin necesidad de lógica difícil.

1

Si esto es ASP.NET (en comparación con Windows Forms), usted puede hacer esto:

Si está utilizando jQuery, agregar esto a su documento listo (o como se hace funcionar su página):

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', ''); 
    }); 
} 

usted tendrá que hacer alguna pequeña refactorización si va a seleccionar más de un cuadro de texto (poner la sentencia if dentro de un cada uno en el elemento).

30

algo que ha funcionado para mí:

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; 
    } 
    }; 

Dónde bool waterMarkActive es una variable miembro de la clase y textBox es el TextBox. Esto probablemente debería ser encapsulado :) Podrían haber algunos problemas con este enfoque, pero actualmente no estoy al tanto de ninguno.

Recientemente he descubierto que las marcas de agua de soporte de Windows en los cuadros de texto; se les llama pancartas de referencia (ver here).Es muy fácil de implementar:

// 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."); 

Dónde textBox es una instancia de TextBox, 0x1501 es el código para el mensaje de ventanas EM_SETCUEBANNER, la wParam pueden ser o bien TRUE (distinto de cero) o FALSE (cero), y lParam es la marca de agua que te gustaría mostrar wParam indica cuándo se debe mostrar el letrero; si se establece en TRUE, el letrero de cue aparecerá incluso cuando el control tenga foco.

+2

Me encanta este 'DllImport'! Gracias por publicarlo. – Kristopher

+0

esta debería ser la respuesta aceptada. la idea de los banners de cue es buena ... –

+0

el banner de referencia no funcionará si usa el cuadro de texto de varias líneas. – 123iamking

8

Basado en la respuesta de @ Pooven (¡gracias!), He creado esta clase. Funciona para mi.

/// <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

Estoy empezando a aprender C# este semestre así que no soy un experto, pero esto funcionó para mí: (Esto es usando formas de las ventanas)

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

genera una salida parecida TO HTML WATERMARK

Aquí está mi código para textbox "marca de agua" o texto de "vista previa" - ¡funciona genial! Usando la aplicación Windows Forms.

NOTA: Este ejemplo tiene 3 cuadros de texto, cada uno tiene el siguiente método para el evento "mouse leave" y "mouse enter" respectivamente.

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

fusionó su comentario en el código, gracias por la entrada .. –

0

En la última versión de C# el cuadro de texto tiene la propiedad PlaceholderText, lo que hace todo el trabajo. Por lo tanto, solo tiene que establecer "Escriba aquí ..." como valor de esta propiedad.

+0

Creo que va a necesitar mostrarnos un enlace de MSDN para esa, porque tengo problemas para encontrar algo en los documentos para respaldarlo. –

0

Si desea evitar el control del cambio de tamaño de los problemas y los problemas de enlace de datos y simplificar el código (vale, es cuestionable), puede simplemente usar una etiqueta y alternar su visibilidad. Entonces

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; 
     } 
    } 

Otro enfoque para las imágenes y los datos evitando problemas de enlace es aquí https://msdn.microsoft.com/en-us/library/bb613590(v=vs.100).aspx

0

@ Sobre la base de la respuesta de Joel. Fijo su clase (gracias a 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

Basado en respuesta útil Ahmed Soliman Flasha siguiente clase:

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

Viendo "Escribe aquí a ..." hasta que el usuario introduce texto en un TextBox es una característica de usabilidad bien conocida hoy en día. ¿Cómo se implementaría esta función en C#?

  1. Conjunto TextBox.Text como "Escribe aquí para ..."

  2. crear un evento, por ejemplo box_click()

  3. -> Pon este código en su método

    private void box_Click(object sender, EventArgs e) 
    { 
        Textbox b = (Textbox)sender; 
        b.Text = null; 
    } 
    
  4. Ahora asigne este método para el "evento Enter" de su cuadro de texto (tal vez uno o varios)

Cuestiones relacionadas