javascript - <textarea> 中的行与 JQuery 链接

Question

我的脚本在这里:jsfiddle

我的表单中有两个属性，我的脚本会在单击 div 区域/链接旁边或双击链接时进行编辑(这是脚本进行编辑的方式)

我的问题是:如果我有一个每行包含一个 URL 的 textarea 并且它在一个链接中汇总所有字符，如果你看我上面的例子，下面的链接实际上是文本区域，第一行是 test1.com 和 test2.com 在第二行，但是脚本显示了这个链接:test1.comtest2.com，我需要它是两个链接每个一行，我该怎么做？

Answer 1

引用这个 LIVE DEMO 2

除了我之前的回答之外，我还修改了 JQuery 的某些部分来处理您的标准。

HTML:

<table>
    <tbody>
        <tr>
            <td class="left">
                <label>Date: </label>
            </td>
            <td class="cartRight">
                <span id="status0" style="float:right;"/>2012-06-20
</td>
        </tr>
        <tr>
            <td class="left">
                <label>*Anchor Text </label>
            </td>
            <td class="cartRight">
                <input type="text" value="dasdas" onchange="immediateEditItemInCart(this.value,'anchor_text',0,'pr','35')" class="mandatory0" readonly="readonly" id="anchor_text0"/>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left">
                <label>*URL </label>
            </td>
            <td class="cartRight">
                <div style="padding:0 !important">
                    <div class="a0" style="padding:0 !important">
                        <a href="test1.com">test.com</a>
                    </div>
                    <input type="text" value="dsad.cas" onchange="immediateEditItemInCart(this.value,'url',0,'pr','35')" class="mandatory0" id="url0" style="display:none"/>
                </div>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left">
                <label>Address </label>
            </td>
            <td class="cartRight">
                <input type="text" value="dsada" onchange="immediateEditItemInCart(this.value,'address',0,'pr','35')" class="mandatory0" readonly="readonly" id="address0"/>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left">
                <label>Phone </label>
            </td>
            <td class="cartRight">
                <input type="text" value="432423" onchange="immediateEditItemInCart(this.value,'phone_number',0,'pr','35')" class="mandatory0" readonly="readonly" id="phone_number0"/>
                <br/>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr>
            <td class="left">
                <label>Date: </label>
            </td>
            <td class="cartRight">
                <span id="status4" style="float:right;"/>2012-06-22
</td>
        </tr>
        <tr>
            <td class="left">
                <label>*Anchor Text </label>
            </td>
            <td class="cartRight">
                <input type="text" value="dasdasd" onchange="immediateEditItemInCart(this.value,'anchor_text',4,'am','30')" class="mandatory4" readonly="readonly" id="anchor_text4"/>
                <br/>
            </td>
        </tr>
        <tr>
            <td class="left" style="vertical-align: top">
                <label>*URL </label>
            </td>
            <td class="cartRight">
                <div style="padding:0 !important;">
                    <div class="a0" style="padding: 0px ! important; display: block;width:200px;">
                        <a target="_blank" href="test1.com">test1.com</a><br/>
                        <a target="_blank" href="test2.com">test2.com</a><br/>
                    </div>
                    <textarea cols="82" onchange="immediateEditItemInCart(this.value,'url',4,'am','30');$(this).autoGrow();" class="mandatory4" id="url4" input="" style="height: auto; overflow: hidden; display: none;" rows="3">test1.com<br></br>test2.com<br></br></textarea>
                    <div class="clear">
        </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>​

JQuery:

$('.a0 a').click(function(){
    var href = $(this).attr('href');

    // Redirect only after 500 milliseconds
    if (!$(this).data('timer')) {
        $(this).data('timer', setTimeout(function() {
            window.open(href, '_blank')
        }, 500));
    }
    return false; // Prevent default action (redirecting)
});

$('.a0').dblclick(function(){
    var txt = document.createElement('div');
    $.each($(this).find('a'), function(i, val) {
        clearTimeout($(val).data('timer'));
        $(val).data('timer', null);
        $(txt).append($(val).text()); 
        $("<br>").appendTo(txt);
    });
    var content = $(this).parent().find('input,textarea');
    var text = "";
    $.each($(txt).html().split("<br>"), function(i, val) {
        if (val != "")
            text += val + "\n"; 
    });
    $(content).html(text);
    $(this).hide();
    $(content).show().focus();
})


$('#url0, #url1, #url4').each(function(index, element) {
    $(element).blur(function(){
        if ($(this).val().length == 0)
            $(this).show();
        else
        {
            var ele = this;
            var lines = $(ele).val().split("\n");
            var divEle = $(ele).hide().prev().show().empty();
            $.each(lines, function(i, val) {
                $("<a />").html(val).attr({
                    'href': val, 
                    'target': '_blank'}).appendTo(divEle);
                $("<br/>").appendTo(divEle);
            });
        }
    });
});
​