1. 程式人生 > >div模擬textarea

div模擬textarea

回車 什麽 支持 mod range idt plaintext lur http

今天本來呢是要搜js中的createTextRange,結果我輸入createTextRange,按下回車,百度第二條就是張鑫旭前輩的博文,意外的驚喜從我點擊進去的那一刻就發生了,

驚喜在這裏:HMTL的塊標簽可以讓其像textarea一樣支持blur,focus事件;

怎麽做到的呢?就我目前一個小菜鳥的水平,這三個簡單方法就可以了:

    第一個方法:contenteditable="true"

      <p contenteditable="true" style="width: 300px ;height: 300px; border:1px solid #f66;"></p>

      contenteditable的屬性嘛,知道:true,false,再加plaintext-only就夠了

      contenteditable=“”

      contenteditable=“true”

      contenteditable=“false”

      contenteditable=“plaintext-only”

      contenteditable=“events”

      contenteditable=“caret”

      這個方法有個缺陷:假如是通過復制黏貼過來的內容,不會去格式化,這就是個尷尬的事了,如下:

      技術分享

     這種方式沒有什麽兼容問題,我試過的Chrome,IE,Firefox,Opera都支持,那還有什麽更好的方式解決這個問題呢?

    第二個方法:其實它的屬性值裏已經有了,哈哈哈,contenteditable=“plaintext-only”,又被你發現了,

      技術分享

      完美解決,但,遺憾的是只有Chrome和Opera支持,我測的Opera版本:技術分享

    第三個方法:user-modify

      user-modify:read-only

      user-modify:write-only

      user-modify:read-write

      user-modify:read-write-plaintext-only(去格式化)

      開發中的時候要加上瀏覽器的前綴:

      -webkit-user-modify: read-write-plaintext-only;(支持去格式化)

      技術分享

      -webkit-user-modify: read-write;(不支持去格式化)

      技術分享

      同樣的,這種方式也只有Chrome和Opera支持;

div模擬textarea