Hello, I know this is probably a very beginner question that I just can't seem to find the answer to but anyway.
How do you allow a muli-line HTML edit box to allow tabs to be put into it?(rather than tab going to the next control)
I would prefer to do this without javascript also.
See here:
<html>
<head>
<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
input.focus();
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
}
function replaceSelection (input, replaceString) {
if (input.setSelectionRange) {
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
if (selectionStart != selectionEnd){
setSelectionRange(input, selectionStart, selectionStart + replaceString.length);
}else{
setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
}
}else if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == input) {
var isCollapsed = range.text == '';
range.text = replaceString;
if (!isCollapsed) {
range.moveStart('character', -replaceString.length);
range.select();
}
}
}
}
// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
}else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item,String.fromCharCode(9));
setTimeout("document.getElementById('"+item.id+"').focus();",0);
return false;
}
}
</script>
</head>
<body>
<form>
<textarea name="data" id="data" rows="20" columns="35" wrap="off" onkeydown="return catchTab(this,event)" ></textarea>
<input type="submit" name="submit" value="Submit"/>
</form>
You cannot do this without JavaScript. Here's a sample done with jQuery if you want to go that route.
Wild hunch but I think you'd want to have multiple HTML edit boxes on the page, then use javascript (like jQuery) to place them into separate tabs.
The tabs will require some sort of javascript to create the interaction.
(ugh. Disregard. I was thinking visual user interface tabs. Not the tab character.)
<input id="textbox" />
<script language="JavaScript">
<!--
var textbox = document.getElementById("textbox");
if (textbox.addEventListener)
textbox.addEventListener("keydown", this.textbox_keyHandler, false);
else if (textbox.attachEvent)
textbox.attachEvent("onkeydown", this.textbox_keyHandler);
function textbox_keyHandler(e)
{
if (e.keyCode == 9)
{
var textbox = document.getElementById("textbox");
textbox.value += "\t";
if(e.preventDefault) e.preventDefault();
return false;
}
}
// -->
</script>