asked on

html setfocus on textarea

Hi Expert,

I have a survey.aspx.vb page

strLabel = strLabel.Trim & "<textarea rows=""7"" cols=""100"" style=""" & strStyle.Trim & """ name=""Comment" & intQuestionNo.ToString.Trim & """>" & strCurrComment.Trim & "</textarea></td></tr>"

lblQuestions.Text = strLabel

If user not put anyting in textarea, I want set focus on this textarea, how I can do it?

Thanks in adance.

khan_webguru

Try this example

<html>
    <head>
    <script language="JavaScript">
    <!--
    function setFocus(num){
      if(num == 1){
        document.myForm.myTextArea1.focus();
      }else if(num == 2){
        document.myForm.myTextArea2.focus();
      }
    }
    -->
    </script>
    </head>
    <body>
    <P>
    <form name="myForm">
      <textarea name="myTextArea1" rows=2 cols=50>
      Here is the first text area.
      </textarea>
    <input type=BUTTON value="Click to Set Cursor" name="myButton1" onClick="setFocus(1)">
      <br>
      <textarea name="myTextArea2" rows=2 cols=50>
      Here is the second text area.
      </textarea>
      <input type=BUTTON value="Click to Set Cursor" name="myButton2"
             onClick="setFocus(2)">
    </form>
    </body>
    </html>

Open in new window

Live demo

http://www.java2s.com/Tutorial/JavaScript/0200__Form/Textareafocus.htm

khan_webguru

another example

http://www.mediacollege.com/internet/javascript/form/focus.html

dshi15

ASKER

I want add some code in my exiting code, I just don't know how to add

My code like that

If strCurrComment ="" then

strLabel = strLabel.Trim & "<textarea setfocus=true rows=""7"" cols=""100"" style=""" & strStyle.Trim & """ name=""Comment" & intQuestionNo.ToString.Trim & """>" & strCurrComment.Trim & "</textarea></td></tr>"

Else

strLabel = strLabel.Trim & "<textarea rows=""7"" cols=""100"" style=""" & strStyle.Trim & """ name=""Comment" & intQuestionNo.ToString.Trim & """>" & strCurrComment.Trim & "</textarea></td></tr>"

End if

How to replace "setfocus=true" and let it happen?

I had asp button Submit on this page.

khan_webguru

When you render this on page means when it will become part of the page right after that call like this

Textbox1.Focus()

but control should be run at server. Why you are not adding dynamic control because after that you can easily call this

khan_webguru

like this

Dim txtBox As New TextBox
txtBox.ID = "txtArea"
txtBox.TextMode = TextBoxMode.MultiLine
txtBox.Columns = 10
form1.Controls.Add(txtBox)

Open in new window

after the last line from above call this

txtArea.focus()

where txtArea is ID of the control that we are adding

dshi15

ASKER

I worked on already exiting code, I don't want make big change on somebody else code.

khan_webguru

@dshi15: please sent me next few line of code also where this string is going to render on HTML. because after when this textarea will be part of the HTML we can apply the solution then hope you are getting my point

khan_webguru

I implemented following application here at my machine for you that is running fine.

Add this in <Head> tag of your application

<script language="javascript" type="text/javascript">
        function setCursor() {
            document.getElementById('myTextArea').focus();
        }
</script>

Open in new window

Where "myTextArea" would be textarea ID

If you already have some javascript funcation added in the head section then simply add the following function in <script> tag

function setCursor() {
            document.getElementById('myTextArea').focus();
        }

Open in new window

then I put an asp.net button on page and on click event I called a server side event and add a textarea from code behind into the page

like this

lblMsg.Text = "<textarea id='myTextArea'  setfocus=true rows='7' cols='100' name='Comment'> Hello </textarea>";

Open in new window

here lblMsg is my already added .net control in which I am adding textarea.

when it become part of the page then I am calling javascript function for cursor setting from code behind like this

string jScript = "<script>setTimeout('setCursor()',2000)</script>";

ClientScript.RegisterClientScriptBlock(this.GetType(), "jScript", jScript);

Open in new window

This will wait just for 2 second so that page load successfully to call client side method and can get textarea that we added.

Hope that will help you.

Regards,

AAK

khan_webguru

As you are looking for VB .Net then you can use like this little change according to your code

Add this in head TAG

<script language="javascript" type="text/javascript">
        function setCursor(textAreaId) {
            document.getElementById(textAreaId).focus();
        }
</script>

Open in new window

And where you have these line of code

Label = strLabel.Trim & "<textarea  setfocus=true rows=""7"" cols=""100"" style=""" & strStyle.Trim & """ name=""Comment" & intQuestionNo.ToString.Trim & """>" & strCurrComment.Trim & "</textarea></td></tr>"

Else

strLabel = strLabel.Trim & "<textarea rows=""7"" cols=""100"" style=""" & strStyle.Trim & """ name=""Comment" & intQuestionNo.ToString.Trim & """>" & strCurrComment.Trim & "</textarea></td></tr>"


End if

Open in new window

Right after this add these lines

Dim strScript As String = "<script>setTimeout('setCursor('Comment"&intQuestionNo.ToString.Trim&"')',2500)</script>"
Page.RegisterStartupScript(this.GetType(),strScript)

Open in new window

That all and here we go just test this :)

ASKER CERTIFIED SOLUTION

khan_webguru

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dshi15

ASKER

Thank you very much and I will try it and let you know tomorrow.