[英]Add button inside textbox
我有这种形式,允许人们根据他们需要的数量添加地址,它由两个按钮控制,一个是“添加地址”,另一个是“删除”。 我想知道是否有人可以帮我删除“删除”按钮,而是在文本框的右角放置一个“x”作为删除该框的按钮。 我已经放置了与下面表格相关的代码。 再次感谢您的帮助,感谢您的帮助。
jQuery的
<script>
$(window).load(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']"></label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" placeholder= "Address ' + (numberOfAddresses+1) + '"/>';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
//$(this).html("Address " + ($(this).parents('.address').index() + 1));
$(this).next("input").attr("placeholder","Address " + ($(this).parents('.address').index() + 1));
});
});
});
</script>
HTML
<form id="form1" method="post" action = "h.php">
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
</div>
<button id="add-address">Add address</button>
<input type="submit" value="Submit" />
</form>
您可以使用css, display:inline-block
和margin-left
HTML
<div class="address">
<!--<label for="data[address][0]">Address 1</label>-->
<input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
<div class="inputRemove">×</div>
</div>
CSS
.inputRemove{
display:inline-block;
margin-left:-20px;
cursor:pointer;
}
.address input[type=text] {
padding-right:25px;
}
.address input[type=text]
样式将使得输入的文本不会显示在关闭x
只需使用绝对位置'x'
.container " position relative
textarea " psotion absolute
.closeBtn " position absolute
注意我把.closeBtn放在textarea元素之后,所以你不需要在css中指定z-index。 默认情况下,后面的元素将位于上一个元素之上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.