如何創建一個允許用戶輸入選項卡的文本框,並且在按下選項卡按鈕時不會將用戶發送到下一個元素?文本框中的選項卡
Q
文本框中的選項卡
4
A
回答
7
您只需要檢查標籤onkeydown
通過event.keyCode === 9
。將字符插入到textarea中並不重要 - 爲'insertatcaret'使用庫或谷歌。
2
您可以使用JavaScript來捕捉Tab鍵按下事件並將其替換爲空格(我不確定是否將製表符插入到textarea中)。
E:This page看起來不錯。
1
onkeypress事件,的onkeyup或onkeydown事件檢查按下的鍵,如果是文本框選項卡,然後追加\ T和返回false,以便重點仍然是文本框 你很可能不得不使用textranges使標籤可以插入任何地方不在文本末尾 這是其餘的基本想法谷歌是你的朋友:)
5
2
<textarea onkeydown="return catchTab(this, event);">
JS代碼:
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();
}
}
}
}
function catchTab(item,e){
if(navigator.userAgent.match("Gecko")){
c=e.which;
} else{
c=e.keyCode;
}
if(c==9){
replaceSelection(item, "\t");
setTimeout(function() { item.focus() } , 0);
return false;
}
}
0
難道不力圖捕捉onkeypress事件事件的 'TAB' 鍵IE(它不工作) (bug 249)
嘗試onkeydown或onkeyup ins TEAD。
相關問題
- 1. 選項卡中的小文本文本
- 2. 更改選項卡選擇選項卡時的文本顏色
- 3. 拉伸選項卡控件中的中心文本框
- 4. 從Javascript中的文本框中刪除選項卡空間
- 5. 在不同的選項卡中更改組合框的文本
- 6. 將文本框值添加到選項卡上的列表框
- 7. 啓用引導選項卡中的選擇文本選項
- 8. jQuery選項卡腳本中的選定選項卡
- 9. 在特定選項卡中打印富文本框多頁C#
- 10. 重疊選項卡文本的應用程序中的選項卡欄圖標
- 11. Xamarin Android ActionBar選項卡 - 1選項卡不顯示文本
- 12. 獲取來自組合框的文本中選定的選項卡
- 13. 2選項卡 - 將標籤1中的文本轉換爲第二個選項卡中的文本標識
- 14. 安卓選項卡布局與選項卡文本中的箭頭按鈕
- 15. 在選項卡布局中的選項卡行上添加文本
- 16. 在GridView的TemplateField文本框輸入鍵執行像選項卡
- 17. 選項卡中的嵌套選項卡
- 18. 合併選項卡中的選項卡
- 19. 更改選定選項卡上的sherlock動作欄選項卡文本顏色
- 20. jQuery UI的選項卡+對話框+格式選項卡順序
- 21. yii框架中的2個選項卡
- 22. 框架7中的嵌套選項卡。
- 23. HTML選擇的選項爲文本框
- 24. 複選框的項目文本選擇
- 25. 如何在wordpress中將文本選項卡更改爲html選項卡
- 26. 根據主複選框選項切換選項卡中的複選框
- 27. 如何修改文本框控件選項卡停止
- 28. 自動選項卡下一個空白文本輸入框
- 29. 文本框焦點 - 點擊與選項卡使用VB
- 30. Jquery:檢查複選框中的選項顯示文本框
元篩選器正在工作,所以我編輯了你的答案。 – UnkwnTech 2009-02-16 02:19:53