jquery - change - Contar caracteres en textarea
set value input javascript (19)
Quiero contar personajes en un área de texto, así que acabo de hacer:
<textarea id="field" onkeyup="countChar(this)"></textarea>
function countChar(val){
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$(''#charNum'').text(500 - len);
}
};
¿Qué pasa con mi pedazo de código? ¡No funciona! Bueno, eso era una letra de novato, necesito ayuda.
⚠️ La solución aceptada es defectuosa.
Aquí hay dos escenarios donde el evento keyup no se activará:
- El usuario arrastra texto al área de texto.
- El usuario copia y pega texto en el área de texto con un clic derecho (menú contextual).
Utilice el evento de input HTML5 en su lugar para una solución más robusta:
<textarea maxlength=''140''></textarea>
JavaScript ( demo ):
var textarea = document.querySelector("textarea");
textarea.addEventListener("input", function(){
var maxlength = this.getAttribute("maxlength");
var currentLength = this.value.length;
if( currentLength >= maxlength ){
console.log("You have reached the maximum number of characters.");
}else{
console.log(maxlength - currentLength + " chars left");
}
});
Y si realmente quieres usar jQuery:
$(''textarea'').on("input", function(){
var maxlength = $(this).attr("maxlength");
var currentLength = $(this).val().length;
if( currentLength >= maxlength ){
console.log("You have reached the maximum number of characters.");
}else{
console.log(maxlength - currentLength + " chars left");
}
});
¿Qué errores estás viendo en el navegador? Puedo entender por qué tu código no funciona si lo que publicaste estaba incompleto, pero sin saber que no puedo estar seguro.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script>
function countChar(val) {
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$(''#charNum'').text(500 - len);
}
};
</script>
</head>
<body>
<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>
</body>
</html>
... funciona bien para mí.
Editar: probablemente borre el div de charNum, o escriba algo, si están por encima del límite.
Aquí mi ejemplo. Cena simple
$(document).ready(function() {
var textarea = $("#my_textarea");
textarea.keydown(function(event) {
var numbOfchars = textarea.val();
var len = numbOfchars.length;
$(".chars-counter").text(len);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="my_textarea" class="uk-textarea" rows="5" name="text"></textarea>
<h1 class="chars-counter">0</h1>
Bueno, esto no es tan diferente de lo que se ha dicho, pero esto funciona muy bien en todos los navegadores.
La idea es eliminar cualquier texto que desborde la longitud definida.
function countTextAreaChar(txtarea, l){
var len = $(txtarea).val().length;
if (len > l) $(txtarea).val($(txtarea).val().slice(0, l));
else $(''#charNum'').text(l - len);
}
El código HTMl sería:
<div id="charNum"></div>
<textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>
Creé mi propio plugin jQuery para esta tarea, puedes probarlo aquí:
http://jsfiddle.net/Sk8erPeter/8NF4r/
Puede crear contadores de caracteres sobre la marcha (y también contadores de caracteres restantes), puede definir si desea cortar texto, puede definir los textos de sufijo y también puede definir un formato corto y su separador.
Aquí hay un ejemplo de uso:
$(document).ready(function () {
$(''#first_textfield'').characterCounter();
$(''#second_textfield'').characterCounter({
maximumCharacters: 20,
chopText: true
});
$(''#third_textfield'').characterCounter({
maximumCharacters: 20,
shortFormat: true,
shortFormatSeparator: " / ",
positionBefore: true,
chopText: true
});
$(''#fourth_textfield'').characterCounter({
maximumCharacters: 20,
characterCounterNeeded: true,
charactersRemainingNeeded: true,
chopText: false
});
$(''#first_textarea'').characterCounter({
maximumCharacters: 50,
characterCounterNeeded: true,
charactersRemainingNeeded: false,
chopText: true
});
$(''#second_textarea'').characterCounter({
maximumCharacters: 25
});
});
Aquí está el código del complemento:
/**
* Character counter and limiter plugin for textfield and textarea form elements
* @author Sk8erPeter
*/
(function ($) {
$.fn.characterCounter = function (params) {
// merge default and user parameters
params = $.extend({
// define maximum characters
maximumCharacters: 1000,
// create typed character counter DOM element on the fly
characterCounterNeeded: true,
// create remaining character counter DOM element on the fly
charactersRemainingNeeded: true,
// chop text to the maximum characters
chopText: false,
// place character counter before input or textarea element
positionBefore: false,
// class for limit excess
limitExceededClass: "character-counter-limit-exceeded",
// suffix text for typed characters
charactersTypedSuffix: " characters typed",
// suffix text for remaining characters
charactersRemainingSuffixText: " characters left",
// whether to use the short format (e.g. 123/1000)
shortFormat: false,
// separator for the short format
shortFormatSeparator: "/"
}, params);
// traverse all nodes
this.each(function () {
var $this = $(this),
$pluginElementsWrapper,
$characterCounterSpan,
$charactersRemainingSpan;
// return if the given element is not a textfield or textarea
if (!$this.is("input[type=text]") && !$this.is("textarea")) {
return this;
}
// create main parent div
if (params.characterCounterNeeded || params.charactersRemainingNeeded) {
// create the character counter element wrapper
$pluginElementsWrapper = $(''<div>'', {
''class'': ''character-counter-main-wrapper''
});
if (params.positionBefore) {
$pluginElementsWrapper.insertBefore($this);
} else {
$pluginElementsWrapper.insertAfter($this);
}
}
if (params.characterCounterNeeded) {
$characterCounterSpan = $(''<span>'', {
''class'': ''counter character-counter'',
''text'': 0
});
if (params.shortFormat) {
$characterCounterSpan.appendTo($pluginElementsWrapper);
var $shortFormatSeparatorSpan = $(''<span>'', {
''html'': params.shortFormatSeparator
}).appendTo($pluginElementsWrapper);
} else {
// create the character counter element wrapper
var $characterCounterWrapper = $(''<div>'', {
''class'': ''character-counter-wrapper'',
''html'': params.charactersTypedSuffix
});
$characterCounterWrapper.prepend($characterCounterSpan);
$characterCounterWrapper.appendTo($pluginElementsWrapper);
}
}
if (params.charactersRemainingNeeded) {
$charactersRemainingSpan = $(''<span>'', {
''class'': ''counter characters-remaining'',
''text'': params.maximumCharacters
});
if (params.shortFormat) {
$charactersRemainingSpan.appendTo($pluginElementsWrapper);
} else {
// create the character counter element wrapper
var $charactersRemainingWrapper = $(''<div>'', {
''class'': ''characters-remaining-wrapper'',
''html'': params.charactersRemainingSuffixText
});
$charactersRemainingWrapper.prepend($charactersRemainingSpan);
$charactersRemainingWrapper.appendTo($pluginElementsWrapper);
}
}
$this.keyup(function () {
var typedText = $this.val();
var textLength = typedText.length;
var charactersRemaining = params.maximumCharacters - textLength;
// chop the text to the desired length
if (charactersRemaining < 0 && params.chopText) {
$this.val(typedText.substr(0, params.maximumCharacters));
charactersRemaining = 0;
textLength = params.maximumCharacters;
}
if (params.characterCounterNeeded) {
$characterCounterSpan.text(textLength);
}
if (params.charactersRemainingNeeded) {
$charactersRemainingSpan.text(charactersRemaining);
if (charactersRemaining <= 0) {
if (!$charactersRemainingSpan.hasClass(params.limitExceededClass)) {
$charactersRemainingSpan.addClass(params.limitExceededClass);
}
} else {
$charactersRemainingSpan.removeClass(params.limitExceededClass);
}
}
});
});
// allow jQuery chaining
return this;
};
})(jQuery);
Esto funcionó bien para mi.
$(''#customText'').on(''keyup'', function(event) {
var len = $(this).val().length;
if (len >= 40) {
$(this).val($(this).val().substring(0, len-1));
}
});
HTML
<form method="post">
<textarea name="postes" id="textAreaPost" placeholder="Write what''s you new" maxlength="500"></textarea>
<div id="char_namb" style="padding: 4px; float: right; font-size: 20px; font-family: Cocon; text-align: center;">500 : 0</div>
</form>
jQuery
$(function(){
$(''#textAreaPost'').keyup(function(){
var charsno = $(this).val().length;
$(''#char_namb'').html("500 : " + charsno);
});
});
Hice una combinación de lo anterior. Permite la interrupción de la entrada de texto, y permite el retroceso, además mantiene el recuento, incluso cuando se retrocede:
Código de JavaScript:
$(document).ready(function () {
$(''#giftmsg'').keypress(function (event) {
var max = 250;
var len = $(this).val().length;
if (event.which < 0x20) {
// e.which < 0x20, then it''s not a printable character
// e.which === 0 - Not a character
return; // Do nothing
}
if (len >= max) {
event.preventDefault();
}
});
$(''#giftmsg'').keyup(function (event) {
var max = 250;
var len = $(this).val().length;
var char = max - len;
$(''#textleft'').text(char + '' characters left'');
});
});
HTML:
<div class="col3">
<h2>3. Optional gift message</h2>
Enter gift message. Limit 250 characters.<br /><br />
<textarea cols="36" rows="5" id="giftmsg" ></textarea>
<a style="padding:7px 0 0 0" href="#">Save Message</a>
<div id="textleft">250 characters left</div>
</div>
¡¡¡¡¡¡Créditos a esos pósters antes que yo ¡Espero que esto ayude a alguien!
Me preguntaba cómo hacer lo mismo y tomar ideas de todos aquí, esto es lo que se me ocurrió:
<textarea name="message" rows="4" cols="24" maxlength="1000" id="message" placeholder="Message:" style=""></textarea><br/>
<span id="charNum"></span>
$(''#message'').keyup(function () {
max = this.getAttribute("maxlength");
var len = $(this).val().length;
if (len >= max) {
$(''#charNum'').text('' you have reached the limit'');
} else {
var char = max - len;
$(''#charNum'').text(char + '' characters left'');
}
});
Muestra de HTML, usada donde sea que necesite un contador, observe la relevancia de las ID de textarea y segundo lapso: id="post" <-> id="rem_post" y el título del lapso que contiene la cantidad de caracteres deseados de cada área de texto en particular
<textarea class="countit" name="post" id="post"></textarea>
<p>
<span>characters remaining: <span id="rem_post" title="1000"></span></span>
</p>
La función de JavaScript, generalmente colocada antes de </body> en mi archivo de plantilla, requiere jQuery
$(".countit").keyup(function () {
var cmax = $("#rem_" + $(this).attr("id")).attr("title");
if ($(this).val().length >= cmax) {
$(this).val($(this).val().substr(0, cmax));
}
$("#rem_" + $(this).attr("id")).text(cmax - $(this).val().length);
});
Prueba este.
<textarea maxlength="410" name="about_me" onkeydown="CountLeft(this.form.about_me, this.form.left);" onkeyup="CountLeft(this.form.about_me,this.form.left); "></textarea>
<input maxlength="3" name="left" readonly="" size="3" type="text" value="410" /> characters left
<script>
function CountLeft(field, count)
{
var max = "410";
if (field.value.length > max)
{
field.value = field.value.substring(0, max);
}
else
{
count.value = max - field.value.length;
}
}
</script>
Tu código estaba un poco mezclado. Aquí hay una versión limpia:
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
$.post("SetAndGet.php", {
know: $("#know").val()
}, function(data) {
$("#know_list").html(data);
});
});
function countChar(val) {
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$(''#charNum'').text(500 - len);
}
}
});
</script>
U puede usar:
$(document).ready(function () {
$(''#ID'').keyup(function () {
var val = $(this).val();
len = val.length;
if (len >= 140) {
$(this).text(val.substring(0, 140));
} else {
console.log(140 - len);
$(''#charNum'').empty().append(140 - len);
}
});
});
Una versión más genérica para que pueda usar la función para más de un campo.
<script src="../site/jquery/jquery.min.js" ></script>
<script type="text/javascript">
function countChar(inobj, maxl, outobj) {
var len = inobj.value.length;
var msg = '' chr left'';
if (len >= maxl) {
inobj.value = inobj.value.substring(0, maxl);
$(outobj).text(0 + msg);
} else {
$(outobj).text(maxl - len + msg);
}
}
$(document).ready(function(){
//set up summary field character count
countChar($(''#summary'').get(0),500, ''#summarychrs''); //show inital value on page load
$(''#summary'').keyup(function() {
countChar(this, 500, ''#summarychrs''); //set up on keyup event function
});
});
</script>
<textarea name="summary" id="summary" cols="60" rows="3" ><?php echo $summary ?></textarea>
<span id="summarychrs">0</span>
Versión mejorada basada en la función de Caterham :
$(''#field'').keyup(function () {
var max = 500;
var len = $(this).val().length;
if (len >= max) {
$(''#charNum'').text('' you have reached the limit'');
} else {
var char = max - len;
$(''#charNum'').text(char + '' characters left'');
}
});
substring() necesita convertirse en substr() .
Ejemplo: jsfiddle.net/xqyWV
$(''#field'').keyup(function () {
var max = 160;
var len = $(this).val().length;
// var char = max - len;
var messages = Math.ceil(len / 160);
if (len >= max) {
$(''#charNum'').text(''('' + messages + '') '' + len + ''/'' + max);
} else {
$(''#charNum'').text(len + ''/'' + max);
}
});
$.fn.extend( {
limiter: function(limit, elem) {
$(this).on("keyup focus", function() {
setCount(this, elem);
});
function setCount(src, elem) {
var chars = src.value.length;
if (chars > limit) {
src.value = src.value.substr(0, limit);
chars = limit;
}
elem.html( limit - chars );
}
setCount($(this)[0], elem);
}
});
var elem = $("#cntr");
$("#status_txt").limiter(160, elem);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function countChar(val)
{
var limit = 1024;
if ( val.length > limit )
{
$("#comment").val(val.substring(0, limit-1));
val.length = limit;
}
$("#count").html((limit)-(val.length));
}
</script>
<textarea id="comment" onKeyUp="countChar(this.value)" required></textarea>
<div id="count"></div>
Use lo siguiente para omitir el uso de else y también saltee el conteo negativo.