正常 focus 只有 input,textarea,button 等等
平常 div 是沒有 focus，但最近看focus-within有一個案例
神奇的选择器 :focus-within - WEB 前端 - 伯乐在线
Off-screen nav with :focus-within [PURE CSS]
查了一下是 tabindex 關係
由於這個很少用，所以還是記錄一下。
说说 tabindex 的那些事儿 | bubkoo 備份圖
定義和用法
tabindex 屬性規定元素的 tab 鍵控制次序（當 tab 鍵用於導航時）。
提示和註釋
註釋：以下元素支持 tabindex 屬性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。
HTML tabindex 属性
(译)如何让 div 可以有 focus 事件?
div 或 span 設定 tabindex 就會有 focus
最後剛好最近在查有沒有按鍵盤切換方向鍵移動不同 table 的 input
剛好有看到
garygreen/arrow-table: Navigate HTML tables with arrow keys (jQuery plugin)
jQuery-利用上下左右鍵移動輸入焦點-黑暗執行緒
由於是上面是用 tabindex 去實作
真想把他改成文字用左再調整更換 input 位置
javascript 对象之 selectionStart selectionEnd - 选择了就坚持 - 博客园
Cross browser Javascript code to get/set caret position in textarea/input
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
function getCaretPosition(ctrl) {
// IE < 9 Support
if (document.selection) {
ctrl.focus();
var range = document.selection.createRange();
var rangelen = range.text.length;
range.moveStart("character", -ctrl.value.length);
var start = range.text.length - rangelen;
return { start: start, end: start + rangelen };
}
// IE >=9 and other browsers
else if (ctrl.selectionStart || ctrl.selectionStart == "0") {
return { start: ctrl.selectionStart, end: ctrl.selectionEnd };
} else {
return { start: 0, end: 0 };
}
}
function setCaretPosition(ctrl, start, end) {
// IE >= 9 and other browsers
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(start, end);
}
// IE < 9
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd("character", end);
range.moveStart("character", start);
range.select();
}
}
|
先留著…以後再修改
