Manipulate text in textbox which is inside gridview using javascript

Question

0.00/5 (No votes)

See more:

Hi,

How can I remove text on focus and restore text on blur from a text box which is inside a gridview row? I do not want to use a button. Just click on text box removes the text and on losing focus, text will be restored.
The values of the textboxes vary and are set during the grid_rowDataBound event.
These are my questions:
1. How can I get the row number of gridview?
2. How can I get the id of the textbox?
3. Where to bind the javascript?

What I have tried:

i tried:

function focus()
{
document.getElementById("txtbox").value="";
}

But found that the id is changing.

Posted 26-Jul-16 0:30am

planetz

Updated 26-Jul-16 3:12am

Add a Solution

Comments

Karthik_Mahalingam 26-Jul-16 6:42am

what if the user enter new values in the textbox?
using jquery does the job easier.

planetz 26-Jul-16 6:49am

actually the user needs to enter value. But default value is NA or values they have entered previously. Now if a user clicks a textbox then it should get clear for him to enter data. Else the old value will be back.

Karthik_Mahalingam 26-Jul-16 6:54am

for new text, it should use only new text on blur ?

planetz 26-Jul-16 7:04am

Let me explain. Suppose on gridview databind there are 3 textboxes in three rows. One has value 3 and other two NA. These values are put while rowdatabound event. Now if a user clicks on textbox containing 3 then 3 will disappear and textbox will be clear to enter new value. If user clicks out of textbox then old value i.e 3 will appear again. So if the user is not interested in changing value, old value will be submitted. In short, user can submit either NA or any number.

Karthik_Mahalingam 26-Jul-16 7:14am

check the solution.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-07-26T01:13:00

refer this sample

HTML

<html>
<head>
    <script src="jquery.js"></script>
    <script>

        $(function () {

            var initialValue = '';
            $(".TextBoxBlurEffect").on('focus', function () { 
                initialValue = this.value;
                this.value = '';
            }).on('blur', function () { 
                var value = this.value;
                if (value == '')
                    this.value = initialValue; 
            });


        });

    </script>

</head>
<body>

    <form id="form1" runat="server">
        <asp:GridView runat="server" ID="gv" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField HeaderText="Test">
                    <ItemTemplate>
                        <asp:TextBox ID="txtbox1" CssClass="TextBoxBlurEffect" Text="NA" runat="server"> </asp:TextBox>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

    </form>


</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
       {
           if (Page.IsPostBack) return;
           gv.DataSource = new int[] {1,2,3,4,5 };
           gv.DataBind();

       }

demo:JSFiddle[^]

Richard Deeming · Accepted Answer · 2016-07-26T03:12:00

No need for script; just use the placeholder attribute[^]. It's supported in pretty much everything except IE9 or earlier[^].

Set the attribute from the code-behind:

C#

protected void grid_rowDataBound(object sender, GridViewRowEventArgs e)
{
    var txt = (TextBox)e.Row.FindControl("txtname");
    txt.Attributes["placeholder"] = "A placeholder...";
}

or from the markup:

ASP.NET

<asp:TextBox id="txtname" runat="server"
    placeholder="A placeholder..."
/>

Manipulate text in textbox which is inside gridview using javascript

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0