核心提示：input一键删除value值的代码教程!doctype htmlhtmlheadmeta charset=utf-8titleinput一键删除value值/titlescript src=http...
input一键删除value值的代码教程
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>input一键删除value值</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
/*input_box*/
.input_box {
width:640px;
margin:20px auto 0 auto;
}
.input_box .input_content {
width:620px;
margin:10px auto 0 auto;
}
.input_box .input_content input {
width:618px;
height:60px;
text-indent:20px;
font-family:"Microsoft YaHei";
font-size:24px;
letter-spacing:0;
color:#656565;
background-color:#f7f7f7;
font-weight:normal;
line-height:60px;
border-radius:4px;
border:1px solid #cecece;
}
.input_box .test {
display:none;
width:620px;
margin:10px auto 0 auto;
}
.input_box .test span {
font-family:"Microsoft YaHei";
font-size:20px;
font-weight:normal;
color:#ff2121;
line-height:20px;
}
.input_box_mistake {
background-color:#f6d425;
padding-top:10px;
padding-bottom:10px;
}
.input_box_mistake .test {
display:block;
}
</style>
</head>
<body>
<p class="form_box">
<p class="input_box input_box_mistake">
<p class="input_content">
<input type="text">
</p>
<p class="test">
<span>此处为必填，请输入数据</span>
</p>
</p>
</p>
<script>
//input加上删除按钮
var $inputText = $("input[type='text']");
$inputText.css({
"width": "560px",
"padding-right": "60px"
});
$inputText.parent().css({
"position": "relative"
});
$inputText.keyup(function() {
$(this).change();
});
$inputText.change(function() {
if ($(this).val() != "" && $(this).parent().find("span").length <= 0) {
// console.log("改变了");
var $mThis = this;
$(this).parent().append(" <span class='clear_btn' style='display:block;width:60px;height: 60px;background:url(https://www.jq22.com/tp/2e6f628a-258a-46db-827e-06f79ca8e032.png) no-repeat center;position: absolute;top: 0;right:0;'></span>");
$(".clear_btn").click(function() {
$(this).parent().find("input").val("");
$(this).remove()
});
} else if ($(this).val() == "" && $(this).parent().find("span").length > 0) {
$(this).parent().find("span").remove();
}
});
</script>
</body>
</html>
