将 url 克隆到 textarea 时，实时 url 预览不起作用答案

【问题标题】：live url preview not working when url is cloned to textarea将 url 克隆到 textarea 时，实时 url 预览不起作用
【发布时间】：2015-07-01 09:48:45
【问题描述】：

我正在建立一个 Humhub 内网网站。

我正在使用jquery plugin liveurl 创建在评论框中输入的网址的实时预览。

Humhub cmets 区域是一个可编辑的 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 将内容克隆到 textarea。

$(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 时，它会被克隆到 textarea 但 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
                            }
                        });

当我在 textarea 中直接输入 url 时，succes 函数正确执行，并且 data attr 包含正确的信息。

有人可以帮助我或有其他解决方案来创建实时网址预览吗？

【问题讨论】：

这将取决于事件。粘贴到 DIV 时，它不会触发 textarea 上所需的事件。
谢谢！我无法触发 div.input-area 上的 liveurl 事件，因为它只支持 textarea 的...

标签： jquery url preview

【解决方案1】：

jquery liveurl 期望在 textarea 上触发 keyup 事件。将内容从 contenteditable div 克隆到 textarea 只会复制内容，但不会触发 keyup。您可以尝试在克隆后触发 keyup。 Working demo

$(document).ready(function () {
    $('.input-area').keyup(function () {
            $('textarea').val($('.input-area').html()).trigger('keyup');

    })
});

【讨论】：