專案需求 增加@功能

先上效果圖

Atwho.js  gitHub地址   https://github.com/ichord/At.js

需要引入的JS：

  <script type="text/javascript" src="jquery.caret.js"></script>    // 這個JS外掛用來獲取游標位置
  <script type="text/javascript" src="dist/js/jquery.atwho.js"></script> // 這個就是atJS了   

這裡是atjs的一些預設配置項 

你可以使用普通的input框   而我們這裡用的是H5的  contentEditable  這個神奇而又強大的屬性  

附上W3C的連線：

http://www.w3school.com.cn/html5/att_global_contenteditable.asp

這裡是我寫的一個demo

  <style type="text/css">
    .inputor {
      height: 160px;
      width: 90%;
      border: 1px solid #dadada;
      border-radius: 4px;
      padding: 5px 8px;
      outline: 0 none;
      margin: 10px 0;
      background: white;
      font-size: inherit;
      overflow-y: scroll;
    }
    .inputor:focus {
      border: 1px solid rgb(6, 150, 247);
    }

  .inputor span{
        color: #3366FF;
    }

  </style>

//  這裡是dom結構

 <div id="editable" class="inputor" contentEditable="true">    //注意這個屬性  contenteditable 屬性規定是否可編輯元素的內容。  就是你可以往裡面填充各種結構標籤 

但是好像只能以JS的方式去新增  打上去的沒有效果 還是標籤 可能出於安全考慮  沒太研究過

// 這裡是JS

<script type="text/javascript">
  $(function(){
      var at_config = {
         at: "@"  ,                              // 這個是觸發彈出選單的按鍵
         data: 'people.json',                     // 這裡是原始碼中封裝的一個AJAX   可以是絕對路徑相對路徑  我這裡是一段模擬的JSON
         insertTpl: '<span data-id="${id}">@${name}</span>',       //你的dom結構裡顯示的內容  你可以給span加樣式  繫結id
         displayTpl: "<li > ${name} </li>",                       // 這個是顯示的彈出選單裡面的內容 
         limit: 200
      }；
     $('#editable').atwho(at_config) // 初始化
  });

  </script>

// 模擬的JSON

[{"id":"1","name":"李乾坤"},{"id":"2","name":"王鍇"},{"id":"3","name":"孔德博"},{"id":"4","name":"劉攀"},{"id":"5","name":"趙又鳴"}]

最後程式碼及效果

解決貼上的樣式問題  

借用張鑫旭大神的程式碼 嘿嘿  

谷歌可以-webkit-user-modify:read-write-plaintext-only 來解決複製進來的格式問題

(function(){
    
    $('[contenteditable]').each(function() {
        // 幹掉IE http之類地址自動加連結
        try {
            document.execCommand("AutoUrlDetect", false, false);
        } catch (e) {}
        
        $(this).on('paste', function(e) {
            e.preventDefault();
            var text = null;
        
            if(window.clipboardData && clipboardData.setData) {
                // IE
                text = window.clipboardData.getData('text');
            } else {
                text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在這裡輸入文字');
            }
            if (document.body.createTextRange) {    
                if (document.selection) {
                    textRange = document.selection.createRange();
                } else if (window.getSelection) {
                    sel = window.getSelection();
                    var range = sel.getRangeAt(0);
                    
                    // 建立臨時元素，使得TextRange可以移動到正確的位置
                    var tempEl = document.createElement("span");
                    tempEl.innerHTML = "&#FEFF;";
                    range.deleteContents();
                    range.insertNode(tempEl);
                    textRange = document.body.createTextRange();
                    textRange.moveToElementText(tempEl);
                    tempEl.parentNode.removeChild(tempEl);
                }
                textRange.text = text;
                textRange.collapse(false);
                textRange.select();
            } else {
                // Chrome之類瀏覽器
                document.execCommand("insertText", false, text);
            }
        });
    });
})();

**點選無法聚焦無法輸入問題**

有時候會有殘留的@的DOM 比如使用者點了[email protected] 沒選人提交了 或者提交後被截斷了 下次再去點輸入框的時候 就會出現失焦無法輸入的問題 這個時候你就要自己過濾下空的和殘缺的@標籤  <span class="atwho-inserted"></span>