Javascript - posta düğmesi devre dışı değil - karakter sayısı çalışmıyor

Bu kod, en az 1 karakter eklediğimde ve karakter sayımı çalışmadığında bana devre dışı bırakılmış bir mesaj vermiyor. Js dosyasının düzgün bir şekilde bağlandığını görmek için index.html'yi kontrol ettim. Safari kullanıyorum, krom da denedim.Javascript - posta düğmesi devre dışı değil - karakter sayısı çalışmıyor

app.js dosyası:

var main = function() { 
$('.btn').click(function() { 
    var post = $('.status-box').val(); 
    $('<li>').text(post).prependTo('.posts'); 
    $('.status-box').val(''); 
    $('.counter').text(140); 
    $('.btn').addClass('disabled'); 
}); 
$('.status-box').keyup(function() { 
    var postLength = $(this).val().length; 
    var charactersLeft = 140 - postLength; 
    $('.counter').text(charactersLeft); 

    if(charactersLeft < 0) { 
     $('.btn').addClass('disabled'); 
    } 
    else if(charactersLeft === 140) { 
     $('.btn').addClass('disabled'); 
    } 
    else { 
     $('.btn').removeClass('disabled'); 
    } 
}); 
$('.btn').addClass('disabled'); 
}; 



$(document).ready(main);

html.index dosyası:

<!doctype html> 
<html> 
<head> 
<link href="http://s3.amazonaws.com/codecademy- content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet"> 
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
<link href="style.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
    <form> 
    <div class="form-group"> 
     <textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea> 
    </div> 
    </form> 
    <div class="button-group pull-right"> 
    <p class="counter">140</p> 
    <a href="#" class="btn btn-primary">Post</a> 
    </div> 

    <ul class="posts"> 
    </ul> 
</div> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="app.js"></script> 

</body> 
</html>

Css dosyası:

html, 
body { 
font-family: 'Roboto', sans-serif; 
color: #404040; 
background-color: #eee; 
} 

.container { 
width: 520px; 
margin-top: 20px; 
} 

.button-group { 
margin-bottom: 20px; 
} 

.counter { 
display: inline; 
margin-top: 0; 
margin-bottom: 0; 
margin-right: 10px; 
} 

.posts { 
clear: both; 
list-style: none; 
padding-left: 0; 
width: 100%; 
} 

.posts li { 
background-color: #fff; 
border: 1px solid #d8d8d8; 
padding-top: 10px; 
padding-left: 20px; 
padding-right: 20px; 
padding-bottom: 10px; 
margin-bottom: 10px; 
word-wrap: break-word; 
min-height: 42px; 
}

kaynak

2016-04-04 user6155249

Ayrıca html dosyanızı gönderir misiniz? ya da bir jsfiddle oluşturmak? – void

Tarayıcı konsolunda herhangi bir hata bildirildi mi? – nnnnnn

'keyup', bu tür bir şey için kullanmak için iyi bir etkinlik değildir. Modern tarayıcılarda 'input' en iyisidir; Daha eski tarayıcılarda, öncelikle 'change',' keypress' (setTimeout gecikme ile) ve standart olmayan 'paste' gibi şeylerin bir birleşimine ihtiyacınız vardır. –

keyup için bu tür kullanmak için iyi bir olay değildir şey. Modern tarayıcılarda, input en iyisidir; eski tarayıcılarda, sen Örneğin

.. (bunlar gerçekleştiğinde alan henüz güncellenmemiş olduğundan, bir setTimeout gecikme ile) öncelikle change, keypress ve keyup şeylerin bir arada gerekir ve standart dışı paste (yorumlar):

var main = function() { 
 
    function enableDisableButtons(field) { 
 
     var postLength = field.val().length; 
 
     var charactersLeft = 140 - postLength; 
 
     $('.counter').text(charactersLeft); 
 

 
     // Note we can readily combine the two conditions and use toggleClass 
 
     var disabled = charactersLeft < 0 || charactersLeft === 140; 
 
     $('.btn').toggleClass('disabled', disabled); 
 
     return disabled; 
 
    } 
 
    $('.btn').click(function() { 
 
     // Proactively check when the button is clicked, in case all else failed 
 
     if (enableDisableButtons($('.status-box'))) { 
 
      return; 
 
     } 
 
     var post = $('.status-box').val(); 
 
     $('<li>').text(post).prependTo('.posts'); 
 
     $('.status-box').val(''); 
 
     $('.counter').text(140); 
 
     $('.btn').addClass('disabled'); 
 
    }); 
 
    $('.status-box') 
 
     .on("input change paste", function() { 
 
      // Field is already updated when these happen 
 
      enableDisableButtons($(this)); 
 
     }) 
 
     .on("keypress keyup", function() { 
 
      // Field not be updated until just *after* these happen, so wait a tick 
 
      setTimeout(enableDisableButtons.bind(null, $(this)), 0); 
 
     }); 
 
    $('.btn').addClass('disabled'); 
 
}; 
 

 
$(document).ready(main);

.disabled { 
 
    color: grey; 
 
}

<textarea class="status-box"></textarea> 
 
<input class="btn" type="button" value="Send"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Yan not: Neden ziyade düğmesinden daha disabled sınıfını kullanın' s intrinsic disabled özelliği?

kaynak

2016-04-04 10:11:52

Bu benim özgün html'im: – user6155249

Düzenlenmiş gönderiyi gör ^^ – user6155249

Javascript - posta düğmesi devre dışı değil - karakter sayısı çalışmıyor

cevap

İlgili konular