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

xdubitOffice Automation ManagerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JorisWCommented:
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

xdubitOffice Automation ManagerAuthor Commented:
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.
JorisWCommented:
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

Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

xdubitOffice Automation ManagerAuthor Commented:
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.
xdubitOffice Automation ManagerAuthor Commented:
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.
JorisWCommented:
I am not sure what is going wrong, I can't test it properly at home.

Perhaps you could try this instead:


<asp:TextBox ID="myTextBox" runat="server" 
                style="top:36%;  position: absolute; 
                height: 66px; 
                width: 269px; left: 8%;" Font-Names="Arial" TextMode="MultiLine" onkeydown = "event.cancelBubble = true;"></asp:TextBox>
 
//Keydown function is no longer needed; cancelBubble prevents the keydown event from reaching the event you have on the <body>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
xdubitOffice Automation ManagerAuthor Commented:
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

JorisWCommented:
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

xdubitOffice Automation ManagerAuthor Commented:
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?
xdubitOffice Automation ManagerAuthor Commented:
Thanks Dude!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JScript

From novice to tech pro — start learning today.