• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 814
  • Last Modified:

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

0
xdubit
Asked:
xdubit
  • 6
  • 4
1 Solution
 
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

0
 
xdubitAuthor 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.
0
 
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

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
xdubitAuthor 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.
0
 
xdubitAuthor 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.
0
 
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

0
 
xdubitAuthor 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

0
 
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

0
 
xdubitAuthor 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?
0
 
xdubitAuthor Commented:
Thanks Dude!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now