[英]Make highlighted input field 'unhighlighted' when user starts typing
I made a simple form with javascript that highlights red fields if you click the "join" button and you leave a field blank. 我用javascript制作了一个简单的表单,如果您单击“加入”按钮并将字段留空,则会突出显示红色字段。
Even after you fill it, until the "Join" button is pressed, it will continue to stay red. 即使将其填满,在按下“加入”按钮之前,它将继续保持红色。 So instead of on click, I just want the highlight to be taken off once the user begins typing.
因此,我希望单击用户开始输入后就将其突出显示,而不是单击。
JSFiddle: http://jsfiddle.net/LCBradley3k/xqcJS/6/ 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.') ;
}
});
Sure, just bind to keydown. 当然,只需绑定到keydown。
http://jsfiddle.net/xqcJS/7/ http://jsfiddle.net/xqcJS/7/
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');
});
you can either use focus or use keyup. 您可以使用焦点或键盘输入。
$('input[type="text"]').keyup(function(e){
$(this).removeClass('empty');
})
You can replace keyup with focus if you want to use the focus since it won't trigger the event each time you type. 如果您想使用焦点,则可以用焦点替换键盘输入,因为它不会在每次键入时触发事件。
Add the following piece of code: 添加以下代码:
$('input[type="text"]').focus(function() {
$(this).removeClass('empty');
});
The class 'empty' will be removed when you focus in on field. 当您专注于字段时,将删除“空”类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.