asked on

Inserting a Carriage Return in a Javascript Function

Hi,

I'm hoping somebody might be able to shed some light on this for me.

I'm using a master page and content pages. In the master page I have the return key set to act as tab. This is coded in the <body> tag(see code below).

My problem is that on some of the content pages there are multiline textboxes. I want to be able to create a new line in these using the return key.

At the moment I have stopped the cursor from tabbing out of the mulitline box when I press return. I have done this using a javascript function (see code below). When I step through my javascript it appears that the carriage return is being added. I suspect this because when I read the value of the variable after it has passed through the code, I see a square box has been appended to the text. However when I run my code the cursor remains directly after what I have just typed.

I have tried using \n, \r and \n\r. When I used the last one, there were two boxes appended to my variable's value.

Any help on this would be appreciated.

Please see my code

//This is what I have in my <body> tag in the master page
//this is what makes the return key act as tab
onkeydown="if (event.keyCode==13) {event.keyCode=9; return event.keyCode }">
 
//this is the multiline textbox I want to overwrite this on
//I want to be able to press return to create a new line in this box instead of tab
<asp:TextBox ID="myTextBox" runat="server" 
                style="top:36%;  position: absolute; 
                height: 66px; 
                width: 269px; left: 8%;" Font-Names="Arial" TextMode="MultiLine" onkeydown = "Keydown(this.value)"></asp:TextBox>
 
//This is the javascript function I am calling
 
function Keydown(value)
{
if (event.keyCode==13) {value = value+ "\n";event.returnValue = false;}
}

Open in new window

JorisW

A normal <asp:TextBox> sends an <input> to the browser.
A MultiLine <asp:TextBox> sends a <textarea> to the browser.

Unlike an <input>, a <textarea> uses HTML source as its value.

The solution would be to use:

// <br> instead of \n
function Keydown(value)
{
if (event.keyCode==13) {value = value+ "<br>\n";event.returnValue = false;}
}

Open in new window

xdubit

ASKER

Thank you for replying JorisW.

I have tried this code, but it is not working. It is not moving to a new line.

I also tried using just <br> on it's own but this did not work either.

JorisW

Oh sorry,

You forgot to set the value, one way of doing this is:

// Changed the onkeydown property
<asp:TextBox ID="myTextBox" runat="server" 
                style="top:36%;  position: absolute; 
                height: 66px; 
                width: 269px; left: 8%;" Font-Names="Arial" TextMode="MultiLine" onkeydown = "this.value = Keydown(this.value)"></asp:TextBox>
 
 
function Keydown(value)
{
if (event.keyCode==13) {value = value+ "<br>\n";event.returnValue = false;}
return value;
}

Open in new window

xdubit

ASKER

JorisW,

I tried this. While in the javascript function the variable is getting <br> character. That's fine.

However after the function it goes back to the function call. When I check the value of the variable it no longer contains the <br> character. It appears that the <br> is being lost when the variable is passed out of the javascript function.

After this the code goes back to the master page function.

I tried messing around with the event.returnValue part of my javascript code, but this is what is preventing the tab from executing on a return key press.

xdubit

ASKER

JorisW,

I had overlooked part of your code. The value is being passed back. However it is literally being passed in as "<br>" and a space after my original text. It is not writing the new line.

ASKER CERTIFIED SOLUTION

JorisW

membership

This solution is only available to members.

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

Start Free Trial

xdubit

ASKER

It's almost working. Thank you for all your help so far.

I took the <br> tag out of your last solution and put in the piece of code I had overlooked(that was the add on to the key down that was used to return the value)

The problem now is that after the first return key press it adds a space. Only on the second key press does is create the new line and then there is a space at the beginning of every new line.

If I then delete the new lines and return there are no spaces after my original text and on the succeeding lines.

It's bizarre because I stepped through and checked the value when I go through the first time and then when I have deleted and am going through a second time and they are the same.

This is what the javascript function looks like now.

function Keydown(value)
{
if (event.keyCode==13) {value = value+ "\n";event.returnValue = false;}
return value;
}

Open in new window

JorisW

Ah, sorry about the first comment, just checked and the .value of a textarea is not HTML.

Have you tried my previous comment?

Also try this:

onkeydown="if (event.keyCode==13) {event.keyCode=9; return event.keyCode }"
 
// change that line to:
 
onkeydown="if (event.keyCode==13) {event.keyCode=9; }"

Open in new window

xdubit

ASKER

JorisW,

Thanks for replying.

The problem is that when I press return it doesn't move the cursor to the next line.

I need the cursor to move to the next line.

Is there a way to make this show on the next line?

xdubit

ASKER

Thanks Dude!