快捷導(dǎo)航

Javascript實(shí)現(xiàn)一個(gè)簡單的輸入關(guān)鍵字添加標(biāo)簽效果實(shí)例

更新時(shí)間：2017年06月01日 11:07:53 作者：itpinpai

這篇文章主要給大家介紹了利用Javascript實(shí)現(xiàn)一個(gè)簡單的輸入關(guān)鍵字添加標(biāo)簽效果的相關(guān)資料，類似動態(tài)添加標(biāo)簽的效果，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面來一起看看吧。

本文主要給大家介紹的是關(guān)于js輸入關(guān)鍵字添加標(biāo)簽效果的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來看看詳細(xì)的介紹：

實(shí)現(xiàn)功能：

輸入關(guān)鍵字加空格鍵添加tag標(biāo)簽
按Backspace鍵刪除一個(gè)標(biāo)簽
輸入關(guān)鍵字后，鼠標(biāo)失去焦點(diǎn)添加tag標(biāo)簽
keyWord.init方法初始化方法

展示效果：

demo演示地址

示例代碼

<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="請輸入關(guān)鍵詞以空格結(jié)尾">
 <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項(xiàng)'
 });

 keyWord.init('php,java,前端開發(fā)')
});

屬性說明：

panel:面板的id
value:隱藏字段的id
max:最多輸入關(guān)鍵字個(gè)數(shù)
tips:提示語

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)元素的拖動與占位功能
這篇文章主要介紹了JS實(shí)現(xiàn)元素的拖動與占位功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-11-11
一些常用且實(shí)用的原生JavaScript函數(shù)
日常開始中常用到的一些原生JavaScript函數(shù),比較實(shí)用, 今天特地整理一下,分享給大家,希望對大家有用,會常更新,同時(shí)也歡迎大家補(bǔ)充.
2010-09-09
uniapp如何使用 web-view 與網(wǎng)頁互相通信
這篇文章主要介紹了uniapp如何使用 web-view 與網(wǎng)頁互相通信,在APP中使用 this.$scope.$getAppWebview() 獲取webview對象實(shí)例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
JavaScript中的事件循環(huán)機(jī)制及其運(yùn)行原理
JavaScript中的事件循環(huán)機(jī)制是一種異步處理機(jī)制，通過維護(hù)事件隊(duì)列和消息隊(duì)列，實(shí)現(xiàn)任務(wù)的分發(fā)和執(zhí)行。事件循環(huán)機(jī)制由主線程和任務(wù)隊(duì)列構(gòu)成，主線程運(yùn)行完當(dāng)前任務(wù)后會檢查任務(wù)隊(duì)列中是否有待執(zhí)行的任務(wù)，如有則執(zhí)行，否則等待
2023-04-04
javascript里模擬sleep(兩種實(shí)現(xiàn)方式)
有幾種方式，但都不完美其一:不斷循環(huán)，直到達(dá)到指定時(shí)間、其二:用xhr同步請求后臺程序，比如傳2000過去，后臺就sleep 2秒后再返回，這種方式也有缺點(diǎn)，當(dāng)N多客戶端都請求后臺時(shí)，一直保持連接http開銷很大,感興趣的朋友可以了解下啊
2013-01-01
JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿msn風(fēng)格選項(xiàng)卡效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)變換頁面元素css樣式實(shí)現(xiàn)切換功能的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
javascript instanceof 內(nèi)部機(jī)制探析
在 JavaScript 中，可以用 instanceof 來判斷一個(gè)對象是不是某個(gè)類或其子類的實(shí)例。
2010-10-10
回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件
這篇文章主要介紹了回車直接實(shí)現(xiàn)點(diǎn)擊某按鈕的效果即觸發(fā)單擊事件,需要的朋友可以參考下
2014-02-02
js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼
這篇文章主要為大家分享了js實(shí)現(xiàn)搜索框關(guān)鍵字智能匹配代碼，感興趣的朋友可以參考一下
2016-01-01