Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
press "Enter" key and put <br> in a textbox
- Thread starter martinb7
- Start date
The below code should work for you.
<html>
<head>
<script language="javascript">
function InsertBreak(e){
//check for return key=13
if (parseInt(e.keyCode)==13) {
//get textarea object
var objTxtArea;
objTxtArea=document.getElementById("test"
;
//insert the existing text with the <br>
objTxtArea.innerText=objTxtArea.value+"<br>";
}
}
</script>
</head>
<body >
<textarea id="test" onkeydown="InsertBreak(event);"></textarea>
</body>
</html>
MrGreed
"did you just say Minkey?, yes that's what I said."
<html>
<head>
<script language="javascript">
function InsertBreak(e){
//check for return key=13
if (parseInt(e.keyCode)==13) {
//get textarea object
var objTxtArea;
objTxtArea=document.getElementById("test"
;//insert the existing text with the <br>
objTxtArea.innerText=objTxtArea.value+"<br>";
}
}
</script>
</head>
<body >
<textarea id="test" onkeydown="InsertBreak(event);"></textarea>
</body>
</html>
MrGreed
"did you just say Minkey?, yes that's what I said."
- Thread starter
- #3
alert(e.keyCode);
Type a key you'll get the integer value.
MrGreed
"did you just say Minkey?, yes that's what I said."
Type a key you'll get the integer value.
MrGreed
"did you just say Minkey?, yes that's what I said."
No it won't stop it, just capture it. Don't believe original post wanted to stop the enter key.
MrGreed
"did you just say Minkey?, yes that's what I said."
MrGreed
"did you just say Minkey?, yes that's what I said."
Of course if the user's cursor is in the middle of the text, the "<BR>" will still get appended to the end. This script will insert a "<BR>" where the user's cursor is (IE only):
<HTML>
<HEAD>
<SCRIPT>
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else
textEl.value = text;
}
function checkEnter(textEl){
storeCaret(textEl);
if(window.event.keyCode==13){
insertAtCaret(textEl,"<BR>"
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft"
ONSELECT="storeCaret(this);"
ONCLICK="storeCaret(this);"
ONKEYUP="checkEnter(this)"></TEXTAREA>
</FORM>
</BODY>
</HTML>
Another option would be to search and replace all line breaks with "<BR>" when the textbox loses focus.
If you're going to display the text on your web page, I'd leave the original text alone and just search and replace the line breaks with "<BR>" at the time of display. In ASP it'd look something like <%=Replace(textVariable,vbCrLf,"<BR>"%>
Yet another option would be to use <span contenteditable="true"></span> and get the innerHTML of the span when they're done.
Adam
<HTML>
<HEAD>
<SCRIPT>
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =
caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
text + ' ' : text;
}
else
textEl.value = text;
}
function checkEnter(textEl){
storeCaret(textEl);
if(window.event.keyCode==13){
insertAtCaret(textEl,"<BR>"
;}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft"
ONSELECT="storeCaret(this);"
ONCLICK="storeCaret(this);"
ONKEYUP="checkEnter(this)"></TEXTAREA>
</FORM>
</BODY>
</HTML>
Another option would be to search and replace all line breaks with "<BR>" when the textbox loses focus.
If you're going to display the text on your web page, I'd leave the original text alone and just search and replace the line breaks with "<BR>" at the time of display. In ASP it'd look something like <%=Replace(textVariable,vbCrLf,"<BR>"
%>Yet another option would be to use <span contenteditable="true"></span> and get the innerHTML of the span when they're done.
Adam
- Status
Similar threads
- Locked
- Question
- Locked
- Question
- Locked
- Question