[英]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.