Question

I would like to be able to add links with an <a> tag based on user input.

HTML

<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">
  <textarea></textarea>
</div>

JS

$('body').on('click', 'button.link-list', function() {
  $("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="form-control" type="text"></div></li>')
  );
});

function updateTree() {
   var myLinks = $("#linkRef ul");
   $("#linkData textarea").val(myLinks.html() + "\n");
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

The above inserts the added list but it inserts the inputs and buttons and all the html in it too, yet not the actual values, i didn't insert the <a> code as i was trying to work out the basic first.

The output within the textarea that I am expecting would be:

<ul>
   <li>
     <a href="www.example.com">Example</a>
   </li>
   <li>
     <a href="www.example2.com">Example2</a>
   </li>
</ul>

I made a JsFiddle playground

添加

对于我的另一个案例，这是another JsFiddle，我正试图在此基础上解决这个新问题，但我没有管理它

Answer 1

据我所知，无法将HTML添加到 textarea

相反，您可以使用可编辑的div（其行为类似于textarea）

示例：<div class="texthere" contenteditable="true"></div>

并使用outerHtml，因此您还可以获得<ul></ul>

加。我在a html（??）

中看不到任何.main ul

请参阅下面的jsfiddle或摘录

$('body').on('click', 'button.link-list', function() {
	$("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="form-control" type="text"></div></li>')
    );
});

function updateTree() {
		var myLinks = $("#linkRef ul");
   $("#linkData .texthere").html(myLinks.prop("outerHTML") + "\n");
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

textarea {
  width: 500px;
  height: 300px;
}

input {
  width: 400px;
  height: 40px;
  margin-bottom: 10px;
}

.margin-top-20 {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">

<div class="texthere" contenteditable="true"></div>

</div>

Answer 2

我认为根据您的要求，您的HTML看起来像这样

 <div id="linkRef">
 <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
 <span class="main_ul">
 </span>
 </div>

<div id="linkData">
<textarea></textarea>
</div>

和js如下设置textarea

  $('body').on('click', 'button.link-list', function() {
  $("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
  $('<ul><li><a href="www.example.com">Example</a></li><li><a href="www.example2.com">Example2</a></li></ul>')
 );
});

  function updateTree() {
  var myLinks = $("#linkRef span");
 $("#linkData textarea").val(myLinks.html() + "\n");
 }

 $("#linkRef").on("DOMSubtreeModified", updateTree);
  $("#linkRef").on('keyup', '.form-group input', updateTree);

Answer 3

这是我解决它的方式：

<div id="myList">
  <ul>
    <li><button class="btn btn-default ul-appending">+ Node</button>      </li>
  </ul>
</div>

<div id="listData">
  <textarea col="10" rows="10"></textarea>
</div>


$('body').on('click', 'button.ul-appending', function() {
    $(this).parent().append(
    $('<ul class="main_ul">').addClass('newul sortable').append(
    $('<li><div class="form-group"><input placeholder="Link title" class="nome_link form-control" type="text"></div><div class="form-group"><input placeholder="Link" class="form-control link_url" type="text"></div></li>')
    )
    );
});

$('body').on('click', 'button.removeThis', function() {
    $(this).parent().parent().parent().remove();
});

function updateTree() {
   $("#listData textarea").text('<li><a href="' + $("#myList input.link_url").val() + '">' + $("#myList input.nome_link").val() + '</a></li>');
 }

$("#myList").on("DOMSubtreeModified", updateTree);
$("#myList").on('keyup', 'input', updateTree);

JsFiddle

Answer 4

＆＃13;

$('body').on('click', 'button.link-list', function() {
	$("#linkRef").on("DOMSubtreeModified", updateTree);
  $('.main_ul').append(
    $('<li><div class="form-group"><input  placeholder="Dai un nome al link...." class="link_name form-control" type="text"></div><div class="form-group"><input placeholder="inserisci il link..." class="inser_link form-control" type="text"></div></li>')
    );
});

function updateTree() {
		var myLinks = $("#linkRef ul li .link_name");
		var myinserLinks = $("#linkRef ul li .inser_link");
   $("#linkData textarea").val(myLinks.val() + "\n" + myinserLinks.val());
 }

$("#linkRef").on("DOMSubtreeModified", updateTree);
$("#linkRef").on('keyup', '.form-group input', updateTree);

＆＃13;

textarea {
  width: 500px;
  height: 300px;
}

input {
  width: 400px;
  height: 40px;
  margin-bottom: 10px;
}

.margin-top-20 {
  margin-top: 20px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div id="linkRef">
  <button type="button" class="btn btn-default link-list">Aggiungi un link</button>
  <ul class="main_ul">
  </ul>
</div>

<div id="linkData">
  <textarea></textarea>
</div>

＆＃13;

如何使用<a> link into a textarea as simple text?

4 个答案: