5 に答える
空白で区切られた値を持つ文字列が与えられた場合:
var str = "test1.com test2.com";
分割することで個々の値を取得できます。
var vals = str.split(/\s+/);
上記では、正規表現を使用して1つ以上の空白文字が一緒にある場合は常に分割し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);
});
もちろん、アンカーテキストを取得し、編集のためにテキストエリアに配置するコードに対応する変更が必要ですが、この作業デモでそれを行いました:http : //jsfiddle.net/pg8Pu/4/
ライブデモを参照
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);
});
}
});
});
以前の回答に加えて、基準を処理するために 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);
});
}
});
});
別の解決策:
$('#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);
})
}
);
あなたの例ではtextarea
、1 つのa
タグの URL からテキスト全体を保存しています。CR/LF は html では重要ではないため、html() を使用して値を読み取ると、テキストから CR/LF が削除されることは明らかです。
2 つのタグが必要な場合は、関数を変更し、タグの代わりに div をコンテナーとして配置し、任意のリンクをダブルクリックしてコンテナー テキストを読み取る必要があります。テキストエリアのテキストをリンクとして保存する場合は、リンク ( a
) タグを 1 つ作成し、コンテナ div に配置する必要があります。