用contenteditable做一個(gè)類似input框的效果

一、定義和用法

1、所有主流瀏覽器都支持 contenteditable 屬性。
2、contenteditable 屬性指定元素內(nèi)容是否可編輯。
3、可以通過(guò)innerText和innerHTML獲取對(duì)應(yīng)的文本。

二、寫法

<div class="aeex_bi_E" ref="aeex_inputArea" contenteditable="true" placeholder="1.支持Word、txt、PDF中的試題,批量復(fù)制錄入,一次建議200-300題
2.先查看右上角【試題格式案例】,按照格式要求,編輯試題后批量復(fù)制
3.試題格式出錯(cuò)時(shí),右側(cè)檢查區(qū)會(huì)出現(xiàn)紅色框提示,說(shuō)明需要修改試題格式" @input="editInputArea"></div>

1、通過(guò)css來(lái)控制點(diǎn)擊區(qū)域的顯示和隱藏

div[contenteditable]:empty:not(:focus):before {
  content: attr(placeholder);
  color: #aaa ;
}

2、通過(guò)css來(lái)顯示默認(rèn)文本

div.aeex_bi_E:empty:before {
    content: attr(placeholder);
    color: #aaa;
    font-size: 14px;
  }

三、效果圖

截圖
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 利用contenteditable做一個(gè)vue屬性的輸入框 contenteditable屬性這是一個(gè)html5 ...
    sunny519111閱讀 12,379評(píng)論 3 5
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,533評(píng)論 1 41
  • CSS CSS3 布局屬性 標(biāo)簽的權(quán)值為1,類選擇符的權(quán)值為10,ID選擇符的權(quán)值最高為100 !importan...
    53cfdb355418閱讀 523評(píng)論 0 0
  • 問(wèn)答題1 /72瀏覽器頁(yè)面有哪三層構(gòu)成,分別是什么,作用是什么?參考答案構(gòu)成:結(jié)構(gòu)層、表示層、行為層分別是:HTM...
    _Yfling閱讀 1,313評(píng)論 0 23
  • 問(wèn)題 點(diǎn)擊跳轉(zhuǎn)到原文 在vue2中對(duì)表單控件有著良好的雙向數(shù)據(jù)綁定機(jī)制,但是對(duì)于要特定實(shí)現(xiàn)某些功能的輸入時(shí),我們就...
    九千_閱讀 1,490評(píng)論 0 1

友情鏈接更多精彩內(nèi)容