1 回答

TA貢獻1829條經(jīng)驗 獲得超7個贊
有多種方法可以使其可編輯,具體來說,我將介紹兩種方法,一種是使用屬性contentEditable
,第二種是渲染輸入。
兩種可能的解決方案
您可以
contentEditable
在div
.?以下是其工作原理的示例:
<table>
? ? <tr>
? ? ? <td>
? ? ? ? <div contenteditable>I'm editable</div>
? ? ? ?</td>
? ? </tr>
? ? <tr>
? ? <td>I'm not editable</td>
? ? </tr>
?</table>
您可以在單擊時添加到,并在模糊時更改<input>為。<td><input>
我將分享一個代碼示例,為了簡單起見,我們不會使用它來渲染輸入document.createElement,而是在每個 td 上使用它,您也可以每次都手動渲染輸入。
function onTdClick() {
? document.querySelector('.my-span').style.display = 'none';
? document.querySelector('.my-input').style.display = 'block';
}
function onInputBlur() {
? document.querySelector('.my-span').style.display = 'block';
? document.querySelector('.my-input').style.display = 'none';
}
.my-input {
? display: none;
}
<table>
? ? <tr>
? ? ? <td>
? ? ? ? <span class="my-span" onclick="onTdClick()">I'm editable</span>
? ? ? ? <input type="text" class="my-input" onblur="onInputBlur()" />
? ? ? ?</td>
? ? </tr>
?</table>
選擇哪種解決方案,contentEditable
或者輸入替換?
您可能想知道選擇哪種解決方案,請記住以下幾點:
標準輸入元素僅限于純文本輸入。使用該
contentEditable
屬性允許用戶編寫包含格式、表格、圖像等的內容。使用
contentEditable
并不像乍一看那樣完全可靠。
話雖如此,值得注意的是,他們正在構建極其復雜的所見即所得編輯器,其中包括許多復雜的功能,他們在該功能上遇到的很多問題是在使用更復雜的功能而不是非常簡單的功能時contentEditable
。
然而,即使是“更簡單”的功能,在使用時也應該注意很多事情contentEditable
,這就是為什么很多人建議在大多數(shù)情況下不要使用它。
底線
除非您需要用戶編輯內容,否則請使用輸入/文本區(qū)域解決方案。做起來要容易得多,因為contentEditable
很快就會變得復雜。
添加回答
舉報