<td class="table-cell" @dblclick="cellEdit($event)" @click="inputFocus($event)">
<input class="cell-input" type="text" v-model=i.value />
</td>
// 单击 td
function inputFocus(event: any) {
editState = false // 取消编辑状态
rowColSelect.selected = false // 取消行列选择
const inputDOM = (event.target as HTMLTableCellElement).children[0] as HTMLInputElement
inputDOM.classList.add('input-focus') // 这个放 focus（）前
inputDOM.focus()
inputDOM.select() // 输入自动 覆盖 原 input的内容
console.log('运行到这了inputFocus', inputDOM)
document.addEventListener('keydown', tdKeydown)
}
// 双击 td 进入编辑状态
function cellEdit(event: any) {
const inputDOM = (event.target as HTMLTableCellElement).children[0] as HTMLInputElement
cellRange.weight = '1px'
let r = window.getSelection() as Selection
r.collapseToEnd()
// inputDOM.selectionStart()
inputDOM.classList.remove('input-focus')
editState = true
}
这里有两个动作， 点td , select() 是全选， 双击要取选 全选
}
问题是我不要全选状态，是要双击进入编辑
目的： 任何input 双击内容都会被全选。 我要自定义dblclick 全选 或 者不全选
用Selection对象的collapseToStart（光标会在输入框前面）或者collapseToEnd（在后面）或者empty和removeAllRanges去掉选择状态
<input type="text" id="el" value="123"/>
<script>
el.select()
setTimeout(() => {//1s后光标会在输入框前
let r = window.getSelection()/* as Selection*/;
r.collapseToStart();
}, 1000)
</script>
移除选中内容
window.getSelection().empty()
设置input离焦之后，文本选中效果消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="input" value="测试文本" />
<script>
const input = document.getElementById("input");
input.select();
setTimeout(() => {
input.blur();
}, 3000);
</script>
</body>
</html>
那你直接使用disabled不可以吗？双击的时候可以编辑，
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！