Question

I have this code here in ASP.NET format

<asp:TextBox ID="BuildingNameTextBox" runat='server' placeholder="Building Name" Text='<%# Bind("BuildingName") %>' />
<asp:TextBox ID="AddressTextBox" runat="server" placeholder="Example: 8th Floor, Sun Life Centre, 5th Avenue corner Rizal Drive, Fort Bonifacio Taguig City" Text='<%# Bind("Address") %>' />
<asp:TextBox ID="CityTextBox" placeholder="Use the autocomplete." runat="server" Text='<%# Bind("City") %>' />
<asp:TextBox ID="RegionTextBox" placeholder="Use the autocomplete." runat="server" Text='<%# Bind("Region") %>' class="subMarkets"/>

and this code in javascript

$("#BuildingNameTextBox").data("holder", $("#BuildingNameTextBox").attr("placeholder"));
            $("input").focusin(function () {
                $(this).attr("placeholder", "");
            });
            $("input").focusout(function () {
                $(this).attr("placeholder", $(this).data("holder"));
            });

The function of the javascript is to remove the placeholder when the textbox is in focus and restore the text of the appropriate textbox when not in focus
I can’t seem to find a way to restore the appropriate text for the succeeding text boxes.

E.g. when I select the Building textbox, the next placeholder of the textbox will be replaced by the placeholder of the BuildingTextBox (Building).

I need to find a way to make the placeholder restore to the appropriate textbox. Thank You

Answer 1

Add a method that is called on the document ready that populates all of them, instead of just #buildingnametextbox:

$("input").each(function () {
    $(this).data("holder", $(this).attr("placeholder"));
});

OR

In your markup, add the data value:

<asp:TextBox ID="BuildingNameTextBox" runat='server' data-holder="Building Name" placeholder="Building Name" Text='<%# Bind("BuildingName") %>' />
<asp:TextBox ID="AddressTextBox" runat="server" data-holder="Example: 8th Floor, Sun Life Centre, 5th Avenue corner Rizal Drive, Fort Bonifacio Taguig City" placeholder="Example: 8th Floor, Sun Life Centre, 5th Avenue corner Rizal Drive, Fort Bonifacio Taguig City" Text='<%# Bind("Address") %>' />
<asp:TextBox ID="CityTextBox" data-holder="Use the autocomplete." placeholder="Use the autocomplete." runat="server" Text='<%# Bind("City") %>' />
<asp:TextBox ID="RegionTextBox" data-holder="Use the autocomplete." placeholder="Use the autocomplete." runat="server" Text='<%# Bind("Region") %>' class="subMarkets"/>