Question

我的脚本在这里：jsfiddle

我的表单中有两个属性，我的脚本会在div区域/链接旁边点击进行编辑，或者双击链接（这是脚本如何进行编辑）

我的问题：如果我有一个 textarea ，每行包含一个网址，并且它会在一个链接中汇总所有字符，如果你看到我上面的例子，下面的链接实际上是textarea，第一行有 test1.com ， test2.com 在第二行，但脚本显示此链接： test1.comtest2.com ，我需要将它们分别为两个链接一排，我该怎么做？

Answer 1

给定一个带有空格分隔值的字符串：

var str = "test1.com test2.com";

您可以通过拆分来检索各个值：

var vals = str.split(/\s+/);

上面使用正则表达式来分割存在一个或多个空格字符的地方，并将vals设置为包含值的数组。

您当前的代码实际上与单个锚元素相关联，因此您需要更新它以创建需要的许多代码。也许如果你将现有锚点包装在某个容器（span或div）中，以便该容器可以容纳多个锚点，那么你可以这样做：

var vals = this.value.split(/\s+/),
    $container = $(this).hide().prev().show().empty();

$.each(vals, function(i, val) {
    if (i > 0) $("<span> </span>").appendTo($container);
    $("<a />").html(val).attr('href',val).appendTo($container);
});

当然，您需要在代码中进行相应的更改，该代码会获取锚文本并将其放入textarea进行编辑，但我已在工作演示中完成了此操作：http://jsfiddle.net/pg8Pu/4/

Answer 2

另一种解决方案：

$('#url0, #url1,#url4').each(

    function(index, element){

        $(element).blur(function(){

             l = this.value.split(/\s+/);

             $(this).hide().prev().show().empty();

             txt = "";

             for(var i in l) {

                 txt += '<a href="'+l[i] +'">'+l[i] + '</a><br />';

             }

             $(this).parent().find('div').not('.clear').html(txt);

        })
    }    
);

请参阅此fiddle

Answer 3

参考 LIVE DEMO

我在HTML上遇到了一些问题，例如没有关闭<br>，<input> ..标记。无论我在HTML上遇到什么问题，我已经解决了这些问题。

在测试现场演示时，请按照以下步骤操作： -

要编辑超链接，请双击虚线区域
要打开链接，请单击链接

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.comtest2.com">test1.com test2.com</a>
                    </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 test2.com</textarea>
                    <div class="clear">
        </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

JS：

$('.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 = "";
    for(var i=0; i<$(this).find('a').length; i++) {
        clearTimeout($(this).find('a').data('timer'));
        $(this).find('a').data('timer', null);
        txt += $(this).find('a').text() + "<br/>"; 
    }

    $(this).parent().find('input,textarea').html(txt).show().focus();
    $(this).hide();
})


$('#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);
            });
        }
    });
});

Answer 4

请参阅 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);
            });
        }
    });
});

Answer 5

在您的示例中，您将整个文本从textarea保存到单个a标记的网址。显然，当使用html（）读取值时，它会从文本中删除CR / LF，因为CR / LF在html中并不重要。

如果您需要有两个标签，则需要更改功能并将div而不是标签作为容器，然后双击任何链接读取容器文本。将textarea文本保存为链接时，需要创建一个单一链接（a）标记并放入容器div

<textarea>中的行与JQuery </textarea>的链接

5 个答案:

HTML：

JS：

HTML：

JQuery的：