我知道这可能是一个非常初级的问题,但我似乎找不到答案。
如何允许多行HTML编辑框输入制表符?(而不是制表符跳到下一个控件)
我更喜欢不使用JavaScript来实现。
如果您想要实现这个功能,必须使用JavaScript。如果您希望使用jQuery来实现,可以参考这个示例。
请点击这里查看:
<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>
这只是我的猜想,但我认为你会希望在页面上有多个HTML编辑框,然后使用JavaScript(如jQuery)将它们放置在单独的选项卡中。
选项卡将需要某种JavaScript来创建交互。
(哎呀。不要理我。我在想视觉用户界面选项卡。而不是制表符。)
<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>