文本框的文本叠加

Question

如何为.net c＃textbox添加教学文本叠加层？

我希望获得与此页面上的标题文本框相同的效果：

Answer 1

您可以使用JQuery执行此操作：

样品：

$('#inputId').watermark('watermark you want to show');

或者您可以使用javascript：

function watermark(inputId,text){
  var inputBox = document.getElementById(inputId);
    if (inputBox.value.length > 0){
      if (inputBox.value == text)
        inputBox.value = '';
    }
    else
      inputBox.value = text;
}

<input id="inputTextboxId" type="text" value="type here" onfocus="watermark('inputTextboxId','type here');" onblur="watermark('inputTextboxId','type here');" />

Answer 2

您可以使用ajax TextBox水印控件：

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
        TargetControlID="TextBox1"
        WatermarkText="Type First Name Here"
        WatermarkCssClass="watermarked" />

您可以从here

获取

Answer 3

如果你使用asp.net，你可以使用Ajax-Control-Kit中的TextBoxWatermarkExtender

http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

---

它是一个扩展器，而不是文本框的替代品，使用它如下：

<asp:textbox id="txtSalesEventNo" runat="server" CssClass="textbox" Width="30%" />
<act:TextBoxWatermarkExtender ID="wmSalesEventNo" TargetControlID="txtSalesEventNo" WatermarkText="Sales Event Number" WatermarkCssClass="watermarked_border" runat="server" />

Answer 4

你可以这样做solution

/* Full overlay */
$(function () {
    $('.full_overlay .content').hide();
    $('.full_overlay').mouseenter(function () {
        $(this).find('.content').stop(true, true).fadeIn('slow');
    }).mouseleave(function () {
        $(this).find('.content').stop(true, true).fadeOut('slow');
    })
});