Javascript實現(xiàn)一個簡單的輸入關鍵字添加標簽效果實例
更新時間：2017年06月01日 11:07:53 作者：itpinpai
這篇文章主要給大家介紹了利用Javascript實現(xiàn)一個簡單的輸入關鍵字添加標簽效果的相關資料，類似動態(tài)添加標簽的效果，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友可以參考借鑒，下面來一起看看吧。
本文主要給大家介紹的是關于js輸入關鍵字添加標簽效果的相關內容，分享出來供大家參考學習，下面來看看詳細的介紹：
實現(xiàn)功能：
- 輸入關鍵字加空格鍵添加tag標簽
- 按Backspace鍵刪除一個標簽
- 輸入關鍵字后，鼠標失去焦點添加tag標簽
keyWord.init方法初始化方法
展示效果：
示例代碼
<style>
.block {
display:flex;
flex-direction:row;
align-items:center;
width:500px;
height:30px;
border:1px solid #ddd;
padding:10px;
margin:100px auto 0;
}
#wordTags {
display:flex;
flex-wrap:nowrap;
}
input{
width:100%;
height:20px;
border:none;
}
</style>
<div class="block">
<div id="wordTags"></div>
<input id="wordInput" type="text" name="" placeholder="請輸入關鍵詞以空格結尾">
<input id="wordHiddenInput" type="hidden" name="">
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="aspect.js"></script>
<script type="text/javascript" src="keyWord.js"></script>
$(function () {
var keyWord = $("#wordInput").keyWord({
panel: '#wordTags',
value: '#wordHiddenInput',
max: 3,
tips: '最多只能輸入3項'
});
keyWord.init('php,java,前端開發(fā)')
});
屬性說明：
- panel:面板的id
- value:隱藏字段的id
- max:最多輸入關鍵字個數(shù)
- tips:提示語
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了JS實現(xiàn)元素的拖動與占位功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
日常開始中常用到的一些原生JavaScript函數(shù),比較實用, 今天特地整理一下,分享給大家,希望對大家有用,會常更新,同時也歡迎大家補充.2010-09-09
這篇文章主要介紹了uniapp如何使用 web-view 與網頁互相通信,在APP中使用 this.$scope.$getAppWebview() 獲取webview對象實例,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
JavaScript中的事件循環(huán)機制及其運行原理
JavaScript中的事件循環(huán)機制是一種異步處理機制，通過維護事件隊列和消息隊列，實現(xiàn)任務的分發(fā)和執(zhí)行。事件循環(huán)機制由主線程和任務隊列構成，主線程運行完當前任務后會檢查任務隊列中是否有待執(zhí)行的任務，如有則執(zhí)行，否則等待2023-04-04
javascript里模擬sleep(兩種實現(xiàn)方式)
有幾種方式，但都不完美 其一:不斷循環(huán)，直到達到指定時間、其二:用xhr同步請求后臺程序，比如傳2000過去，后臺就sleep 2秒后再返回，這種方式也有缺點，當N多客戶端都請求后臺時，一直保持連接http開銷很大,感興趣的朋友可以了解下啊2013-01-01
這篇文章主要介紹了JS+CSS實現(xiàn)仿msn風格選項卡效果代碼,涉及JavaScript響應鼠標事件動態(tài)變換頁面元素css樣式實現(xiàn)切換功能的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
JS Array.from()將偽數(shù)組轉換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
在 JavaScript 中，可以用 instanceof 來判斷一個對象是不是某個類或其子類的實例。2010-10-10
回車直接實現(xiàn)點擊某按鈕的效果即觸發(fā)單擊事件
這篇文章主要介紹了回車直接實現(xiàn)點擊某按鈕的效果即觸發(fā)單擊事件,需要的朋友可以參考下2014-02-02
這篇文章主要為大家分享了js實現(xiàn)搜索框關鍵字智能匹配代碼，感興趣的朋友可以參考一下2016-01-01