< textarea>中的行；链接到JQuery [英] Rows in <textarea> to links with JQuery

问题描述

我的脚本在这里: jsfiddle

我在表单中有两个属性，脚本可以在div区域/链接旁边单击时进行编辑，或者双击链接(此脚本如何进行编辑)

i have two attributes in my form that my script do edit on a click in the div area/next to the link or double click on the link ( this how the script do the edit )

我的问题是:如果我有一个 textarea ，该行每行包含一个URL，并且将一个链接中的所有字符加起来，如果您在上面看到了我的示例，下面的链接实际上是文本区域，第一行是 test1.com ， test2.com 在第二行中，但是，脚本显示此链接: test1.comtest2.com ，我需要将其作为两个链接连续，我该怎么办?

my problem is: if i have a textarea that includes an URLs per row and it sums all the chars in one link, if you see my example above, the link below is actually textarea with test1.com in first row and test2.com in second row, but the script shows this link : test1.comtest2.com, and i need it to be two link each one on a row, how can i do this ?

推荐答案

请参阅此 实时演示2

Refer this LIVE DEMO 2

除了我以前的回答，我还修改了JQuery的某些部分以处理您的条件.

Addition to my previous answer, I have modified some parts of JQuery to handle your criteria.

<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);
            });
        }
    });
});
​

这篇关于< textarea>中的行；链接到JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！