自定义使用按钮添加的新输入

Question

下面有一段代码，它允许我单击一个按钮并添加一个新的 input/text 框。

我想知道是否可以为此输入设置 css，以便它添加一个格式与现有文本框相同的文本框？

 $(function() {
     $(".addtextbox").click(function() {
         $(".addtextbox").before("<input><br>");
     });
 });

Answer 1

试试这个：

 $(function() {
     $(".addtextbox").click(function() {
         $(".addtextbox").before("<input><br>");

         /*Your styles*/
         $(".addtextbox").style.color = "blue";
         $(".addtextbox").style.backgroundColor ='#FFFFFF';
         $(".addtextbox").style.width=200px;
     });
 });

Answer 2

将 class 添加到输入中，然后在样式表中为其指定样式：

JQUERY

 $(function() {
     $(".addtextbox").click(function() {
         $(".addtextbox").before("<input class='myTextBox'><br>");
     });
 });

CSS

.myTextBox{
    color: blue;
    width: 100%;
}

Answer 3

@Cláudio Barreira 的回答很好，但是如果你想在 JS 中这样做

使用此代码添加样式表

HTML

<button class="addtextbox">Add text input</button>

jQuery

$(".addtextbox").click(function() {
    $(this).before("<input><br>");
    $(this).prevAll("input:first").css("background-color","red");
});

在这里你可以看到例子 JSFIDDLE - http://jsfiddle.net/00fo9pq6/

自定义使用按钮添加的新输入

Customizing a new input that is added using a button

html

css

jquery

textbox

jquery-ui