Javascript - Post-Taste nicht deaktiviert - Zeichenanzahl funktioniert nicht

Dieser Code gibt mir keine deaktivierte Post-Taste, wenn ich nicht mindestens 1 Zeichen eingefügt haben, und die Anzahl der Zeichen funktioniert nicht. Ich habe index.html überprüft, um zu sehen, dass die js-Datei richtig verknüpft ist. Ich benutze Safari, habe auch Chrom getestet.Javascript - Post-Taste nicht deaktiviert - Zeichenanzahl funktioniert nicht

app.js Datei:

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 Datei:

<!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-Datei:

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; 
}

Quelle

2016-04-04 user6155249

Können Sie Ihren HTML-Code auch posten? oder eine jsfiddle erstellen? – void

Wird in der Browserkonsole ein Fehler gemeldet? – nnnnnn

'keyup' ist kein gutes Ereignis für diese Art von Sache. In modernen Browsern ist "Eingabe" am besten; In älteren Browsern benötigen Sie eine Kombination von Dingen, hauptsächlich 'change',' keypress' (mit einer setTimeout-Verzögerung) und die nicht-standard 'paste' .. –

keyup kein gutes Ereignis ist für diese Art von verwenden Ding. In modernen Browsern ist input am besten; auf älteren Browsern, benötigen Sie eine Kombination von Dingen, vor allem change, keypress und keyup (mit setTimeout Verzögerung, da das Feld noch nicht aktualisiert wird, wenn sie geschehen), und die Nicht-Standard-paste ..

Zum Beispiel (siehe Kommentare):

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>

Randbemerkung: Warum eine disabled Klasse verwenden, anstatt die Schaltfläche‘ s intrinsische disabled Funktion?

Quelle

2016-04-04 10:11:52

Das ist mein Original html: – user6155249

Siehe bearbeitet Post ^^ – user6155249

Javascript - Post-Taste nicht deaktiviert - Zeichenanzahl funktioniert nicht

Antwort

Verwandte Themen