jquery 添加自定义表单元素
要添加自定义表单元素,可以使用jQuery插件来实现。下面是一个例子:
HTML代码:
<div class="custom-input">
<input type="text" name="custom-input" id="custom-input">
<label for="custom-input">Custom Input</label>
</div>
jQuery代码:
(function($) {
$.fn.customInput = function() {
return this.each(function() {
var $this = $(this);
$this.find('input').on('focus', function() {
$this.addClass('active');
});
$this.find('input').on('blur', function() {
if ($(this).val() === '') {
$this.removeClass('active');
}
});
});
};
})(jQuery);
$(function() {
$('.custom-input').customInput();
});
上面的代码会给所有包含class为“custom-input”的元素添加自定义表单元素的功能。具体来说,它将包含input和label的div元素转换为一个带有动态效果的输入框。当用户点击输入框时,输入框周围的div元素会添加一个“active”类,当用户离开输入框时,如果输入框中没有任何值,div元素会移除“active”类。
你可以根据自己的需要修改上面的代码来实现不同的自定义表单元素
原文地址: https://www.cveoy.top/t/topic/hhKv 著作权归作者所有。请勿转载和采集!