使用jQuery將HTML附加到表單字段

可以說我有一個表單字段，並且我想要append a span標記。是否有可能用jQuery做到這一點？使用jQuery將HTML附加到表單字段

我試過這段代碼：

$("input").append("<span>My HTML to append</span>");

否則我將不得不使用別的東西來追加HTML。

因此，這將是這樣的：

<input><span>My HTML to append</span></input>

但是，這是行不通的。

就像在StackOverflow的問題中添加標籤一樣，每個標籤都是一個塊。

編輯：當向問題添加標籤時，StackOverflow是如何做到的。

來源

2014-05-02 Undefined Web

你想要什麼？ –

您沒有將span擴展到輸入tag.it將不適用 –

您不能將HTML追加到表單元素。如果你的意思是你想設置它的值，使用'val（）' –

input內容不能有任何的子元素，所以你不能對他們使用append。

您可以使用jQuery的val方法來設置它們的值。

他們不會呈現在任何情況下 HTML，如果將值設置爲<span>My HTML to append</span>，這正是你在輸入見。

回覆您的編輯：

因此，這將是這樣的：

<input><span>My HTML to append</span></input>

這是無效的HTML。 input elements不能有內容，它們是"void" elements。這就是爲什麼你不能在他們身上使用append。

重新下方的評論：

添加標記的問題時怎麼StackOverflow上做到這一點。

他們沒有。相反，有一個輸入，當你輸入完成標籤，他們將其刪除，並把它在輸入前一個跨度，所以你結了：

<span> 
    <span class="post-tag">tag</span> 
    <span class="post-tag">another-tag</span> 
</span> 
<input type="text">

在任何現代的瀏覽器中，右鍵單擊標籤輸入字段並選擇「檢查元素」以查看實時。

這裏是這樣做的非常快速和骯髒的例子（但也有大量的插件在那裏做它 — tagit，select2 [這我的客戶的一個用途和愛]，...）：Live Copy

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<meta charset=utf-8 /> 
<title>Tags-Like Input</title> 
    <style> 
    .input-wrapper { 
     border: 1px solid #aaa; 
    } 
    .post-tag { 
     border: 1px solid #00a; 
     margin-right: 2px; 
    } 
    </style> 
</head> 
<body> 
    <div class="input-wrapper"> 
    <input type="text" id="theInput"> 
    </div> 
    <script> 
    (function() { 
     $("#theInput").on("keypress", function(e) { 
     if (e.which === 32) { 
      e.preventDefault(); 
      addTag($.trim(this.value)); 
      this.value = ""; 
     } 
     }); 
     function addTag(tag) { 
     $('<span class="post-tag"></span>') 
      .text(tag) 
      .insertBefore("#theInput"); 
     } 
    })(); 
    </script> 
</body> 
</html>

來源

2014-05-02 08:56:24

當向問題添加標籤時，StackOverflow是如何做到的。 –

@ user3588664：他們沒有，請參閱編輯。 –

@ user3588664：我已經添加了一個*非常*快而又髒的例子。 –

輸入元素不能有任何子節點，所以不能，你不能。

如果您願意，您可以將值（使用.val()方法）設置爲一個HTML字符串。

您可以將該字符串連接到現有值。

var $in = $("input"); 
$in.val(
    $in.val() + "<span>My HTML to append</span>" 
);

來源

2014-05-02 08:55:50 Quentin

至於其他的都指出input元素不能有子元素。

因此，在一個標籤系統中，常用的方法是使用輸入元素來選擇一個標籤，然後將其添加到放置在輸入元素旁邊的容器元素中，並以它們的樣式一個單一的控制。

在一種非常原始的方式，可以使用.after()/.before()要做得像

$("input").after("<span>My HTML to append</span>");

，但也有這樣做已經有很多的插件，所以我會建議使用它們的人喜歡select2

來源

2014-05-02 09:17:59

看，你是對的！ ;-) –

使用jQuery將HTML附加到表單字段

回答

相關問題