解決bootstrap中使用modal加載kindeditor時(shí)彈出層文本框不能輸入的問(wèn)題
廢話不多說(shuō)了直接給大家貼代碼了,具體代碼如下所示:
$('#myModal').on('shown', function() {
$(document).off('focusin.modal');
});
//顯示modal
$('#myModal').modal('show');
//show完畢前執(zhí)行
$('#myModal').on('shown', function () {
//加上下面這句!解決了~
$(document).off('focusin.modal');
// 打開(kāi)Dialog后創(chuàng)建編輯器
KindEditor.create('textarea[name="content"]', {
resizeType : 1
});
})
//hide完畢前執(zhí)行
$('#myModal').on('hidden', function () {
// 關(guān)閉Dialog前移除編輯器
KindEditor.remove('textarea[name="content"]');
})
下面是我在項(xiàng)目中的應(yīng)用,請(qǐng)大家注意加注釋的那一句!
function computeMaskHeight() {
var obj = $("#blockLoading");
var parent = obj.parent();
obj.height(parent.height());
}
function block(opt) {
var defaults = {
title: "",
showClose: true,
showOk: true,
showBottom: true,
showTitle: true,
showHead: true,
onOk: function() {
},
onShown: function(e) {
}
};
var setting = $.extend(defaults, opt);
$("#blockTitle").html(setting.title);
if (setting.showClose) {
$("#closeBlock, #closeBlockX").show();
} else {
$("#closeBlock, #closeBlockX").hide();
}
if (setting.showOk) {
$("#blockOk").show();
} else {
$("#blockOk").hide();
}
$("#blockOk").unbind().click(function() {
setting.onOk();
});
if (setting.showBottom) {
$("#blockBottom").show();
} else {
$("#blockBottom").hide();
}
if (setting.showHead) {
$("#blockHead").show();
} else {
$("#blockHead").hide();
}
$("#blockBody").html("<i class='icon-spinner icon-spin icon-4x'></i>");
$('#blockContainer').off('shown.bs.modal').on('shown.bs.modal', function (e) {
$(document).off('focusin.modal');//解決編輯器彈出層文本框不能輸入的問(wèn)題http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field
setting.onShown(e);
});
$("#blockContainer").modal();
}
以上所述是小編給大家介紹的解決bootstrap中使用modal加載kindeditor時(shí)彈出層文本框不能輸入的問(wèn)題,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實(shí)例
這篇文章主要介紹了微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
史上最全JavaScript常用的簡(jiǎn)寫(xiě)技巧(推薦)
這篇文章主要介紹了JavaScript常用的簡(jiǎn)寫(xiě)技巧,列舉了20條js中常用的簡(jiǎn)寫(xiě)技巧,具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下2017-08-08
原生js實(shí)現(xiàn)移動(dòng)端觸摸輪播的示例代碼
下面小編就為大家分享一篇原生js實(shí)現(xiàn)移動(dòng)端觸摸輪播的示例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
JavaScript移除數(shù)組元素減少長(zhǎng)度的方法
數(shù)組想必大家對(duì)它并不陌生吧,有些新手朋友們都不知道如何移除數(shù)組元素,下面為大家介紹個(gè)示例,喜歡的朋友可以了解下2013-09-09
bootstrap表單按回車會(huì)自動(dòng)刷新頁(yè)面的解決辦法
這篇文章主要介紹了bootstrap表單按回車會(huì)自動(dòng)刷新頁(yè)面的問(wèn)題及解決辦法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
淺析BootStrap中Modal(模態(tài)框)使用心得
Bootstrap Modals(模態(tài)框)是使用定制的 Jquery 插件創(chuàng)建的。本文給大家分享BootStrap中Modal(模態(tài)框)使用心得,一起看看吧2016-12-12
JavaScript通過(guò)RegExp實(shí)現(xiàn)客戶端驗(yàn)證處理程序
通過(guò)RegExp實(shí)現(xiàn)客戶端驗(yàn):讓文本框只允許輸入數(shù)字、文本框只允許輸入中文、郵箱輸入格式的判斷等等,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-05-05
uniapp中使用render.js進(jìn)行openlayers、arcgis等地圖操作實(shí)戰(zhàn)指南
renderjs是一個(gè)運(yùn)行在視圖層的js,它比WXS更加強(qiáng)大,它只支持app-vue和h5,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用render.js進(jìn)行openlayers、arcgis等地圖操作的相關(guān)資料,需要的朋友可以參考下2024-01-01

