![](/img/trans.png)
[英]How to make complete form in which background color of button changes when user starts typing in input field with javascript , html and css?
[英]Make highlighted input field 'unhighlighted' when user starts typing
我用javascript制作了一个简单的表单,如果您单击“加入”按钮并将字段留空,则会突出显示红色字段。
即使将其填满,在按下“加入”按钮之前,它将继续保持红色。 因此,我希望单击用户开始输入后就将其突出显示,而不是单击。
JSFiddle: http : //jsfiddle.net/LCBradley3k/xqcJS/6/ Javascript:
$(document).ready(function(){
/* setTimeout(function(){
$('.inputs').show("slide", { direction: "down" }, 1000);
}, 2000);
});*/
$('#join').click(function(){
var correct = true;
$('input[type="text"]').each(function(indx){
var $currentField = $(this);
if ($currentField.val() === ''){
$currentField.addClass('empty');
correct = false;
} else{
$currentField.removeClass('empty');
}
});
if (correct) {
$('#answer').html('Thank You!');
setTimeout(function(){
$('.inputs').hide("slide", { direction: "up" }, 1000);
}, 2000);
} else {
$('#answer').html('Please fill highlighted fields.') ;
}
});
在表单输入上添加一个keyup
处理程序以删除该类:
$('input[type="text"]').keyup(function (event) {
var $currentField = $(this);
if ($currentField.val() !== '') {
$currentField.removeClass('empty');
}
});
当然,只需绑定到keydown。
if ($currentField.val() === ''){
$currentField.addClass('empty');
correct = false;
$currentField.one('keydown',function(){
$currentField.removeClass('empty');
});
$('input[type="text"]').keydown(function() {
if ( $(this).val != "" )
$(this).removeClass('empty');
});
您可以使用焦点或键盘输入。
$('input[type="text"]').keyup(function(e){
$(this).removeClass('empty');
})
如果您想使用焦点,则可以用焦点替换键盘输入,因为它不会在每次键入时触发事件。
添加以下代码:
$('input[type="text"]').focus(function() {
$(this).removeClass('empty');
});
当您专注于字段时,将删除“空”类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.