jquery liveurl期望在文本区域触发一个keyup事件。将内容从contenteditablediv克隆到textarea只会复制内容,但不会触发keyup。您可以在克隆后尝试触发keyup。工作演示
我正在建立一个Humhub内部网网站。
我使用jquery插件liveurl来创建一个在评论框中键入的url的实时预览。
Humhub评论区是一个可编辑的div,其内容被克隆到一个隐藏的文本区。
<textarea style="width: 300px; height: 100px;" placeholder="write here"></textarea>
<div class="input-area" style="width: 300px; height: 100px; border:1px solid #CCC;" contenteditable="true"></div>
Humhub使用以下jquery将内容克隆到文本区域。
$(document).ready(function () {
$('.input-area').keyup(function () {
if ($(this).html() == "" || $(this).html() == " " || $(this).html() == " <br>") {
$(this).html(placeholder);
$(this).addClass('atwho-placeholder');
} else {
$('textarea').val(getPlainInput($(this).clone()));
}
})
当在div.input-area中输入url时,它会被克隆到文本区域,但liveurl插件什么也不做。我从liveurl插件网站得到的代码如下。
$('textarea').liveUrl({
loadStart : function(){
console.log('start');
},
loadEnd : function(){
console.log('finished');
},
success : function(data)
{
console.log(data);
// this return the first found url data
}
});
当我直接在文本区域输入url时,successs函数将正确执行,并且数据属性包含正确的信息。
有人能帮我吗?或者有人有其他解决方案来创建实时url预览吗??
$(document).ready(function () {
$('.input-area').keyup(function () {
$('textarea').val($('.input-area').html()).trigger('keyup');
})
});