Question posted in
The official documentation can be found here.

Floating Placeholder in TextBox ASP.NET 4.0

I’m new to programming and I don’t know complicated things. But I want to add small features to my site. Is there an easy way to move theplaeholder up when something is typed into the text box?

<form id="form1" runat="server">
    <table class="w-100">
        <tr>
            <td><asp:TextBox ID="floatingInput" runat="server" class="form-control"  TextMode="SingleLine" placeholder="Email"></asp:TextBox></td>
         </tr>
         <tr>
            <td><asp:TextBox ID="floatingPassword" runat="server" class="form-control" TextMode="Password" placeholder="Password"></asp:TextBox></td>
         </tr>
     </table>
</form>

I have searched this on internet but I couldn’t find like the way my code is written. I couldn’t integrate those solutions to my code.

Tags:

2

Answers


  1. 0

    You can use javascript for this.

    In asp.net core 6 project with css library Bootstrap 5; I am using floating Input like that

    <div class="form-floating mb-3">
  <input type="email" 
         class="form-control" 
         id="floatingInput" 
         placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>

    Also you can write label manually.

    Login or Signup to reply.
  2. 0

    What you need is to create a separate element with a placeholder content and then control it’s position when textbox is empty or not.

    Simple example in plan html:

    .text-box {
  position: relative;
  margin: 20px;
}
    
.text-box input {
  width: 100%;
  padding: 10px;
}
    
.text-box label {
  position: absolute;
  top: 12px;
  left: 10px;
  color: #aaa;
  pointer-events: none;
}
    
.text-box input:focus ~ label,
.text-box input:not(:placeholder-shown) ~ label {
  top: -20px;
  left: 10px;
}
    <div class="text-box">
  <input placeholder=" ">
  <label>Some placeholder</label>
</div>

    You can then customize the exact placeholder behavior, for example by adding a smooth transition or different colors for different states.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search