Я хочу считать символы в текстовом поле, поэтому я просто сделал:
<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);
}
};
Что случилось с моей частью кода? Это не работает! Ну, это был почерк новичка, нужна помощь.
Какие ошибки вы видите в браузере? Я могу понять, почему ваш код не работает, если то, что вы отправили, было неполным, но не зная, что я точно не знаю.
<!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>
... отлично работает для меня.
Изменить: вам, вероятно, следует очистить div charNum или написать что-нибудь, если они превышают лимит.
Улучшенная версия на основе Функция 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');
}
});
Вот два сценария, когда событие keyup не будет запущено:
Вместо этого используйте событие input HTML5 для более надежного решения:
<textarea maxlength='140'></textarea>
JavaScript (демо):
const textarea = document.querySelector("textarea");
textarea.addEventListener("input", event => {
const target = event.currentTarget;
const maxLength = target.getAttribute("maxlength");
const currentLength = target.value.length;
if (currentLength >= maxLength) {
return console.log("You have reached the maximum number of characters.");
}
console.log('${maxLength - currentLength} chars left');
});
И если вы абсолютно хотите использовать 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");
}
});
это работало отлично для меня.
$('#customText').on('keyup', function(event) {
var len = $(this).val().length;
if (len >= 40) {
$(this).val($(this).val().substring(0, len-1));
}
});
HTML-образец, используемый везде, где мне нужен счетчик, обратите внимание на релевантность идентификаторов textarea и второго span: id="post" ↔ id="rem_post" и заголовок диапазона, который содержит количество требуемых символов каждого конкретного текстового поля
<textarea class="countit" name="post" id="post"></textarea>
<p>
<span>characters remaining: <span id="rem_post" title="1000"></span></span>
</p>
Функция JavaScript, обычно помещенная перед </body> в файл шаблона, требует 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);
});
substring() должно стать substr().
Пример: jsfiddle.net/xqyWV
Ну, это не так, как было сказано, но это очень хорошо работает во всех браузерах.
Идея состоит в том, чтобы удалить любой текст, который переполняет определенную длину.
function countTextAreaChar(txtarea, l){
var len = $(txtarea).val().length;
if (len > l) $(txtarea).val($(txtarea).val().slice(0, l));
else $('#charNum').text(l - len);
}
Код HTMl будет:
<div id="charNum"></div>
<textarea onkeyup="countTextAreaChar(this, 10)" class="textareaclass" id="smallword" rows="40" cols="30" name="smallword"></textarea>
HTML
<form method="post">
<textarea name="postes" id="textAreaPost" placeholder="Write what 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);
});
});
Я сделал комбинацию из вышеперечисленного. Он позволяет останавливать ввод текста и допускать обратную прокрутку, а также сохраняет счет даже в случае обратной привязки:
Код 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 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>
Кредит на эти плакаты передо мной!! Надеюсь, это поможет кому-то!
Я создал свой собственный jQuery-плагин для этой задачи, вы можете попробовать его здесь:
http://jsfiddle.net/Sk8erPeter/8NF4r/
Вы можете создавать счетчики символов "на лету" (а также оставшиеся счетчики символов), вы можете определить, хотите ли вы нарезать текст, вы можете определить тексты суффиксов, а также определить короткий формат и его разделитель.
Здесь пример использования:
$(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
});
});
Здесь код плагина:
/**
* 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);
$.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);
Мне было интересно, как это сделать и принимать идеи от всех здесь, вот что я придумал:
<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');
}
});
Ваш код немного перепутался. Вот чистая версия:
<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>
Попробуйте это.
<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>
Более общая версия, поэтому вы можете использовать эту функцию для нескольких полей.
<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>
<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>
Используйте следующую команду, чтобы пропустить с помощью else, а также пропустить получение отрицательного счета.
Вот мой пример. Ужин простой
$(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>Мы не были довольны ни одним из намеченных решений.
Итак, мы создали полное решение для счетчика символов для JQuery, построенное поверх jquery-jeditable. Это расширение плагина textarea которое может рассчитывать в обоих направлениях, отображает пользовательское сообщение, ограничивает количество символов, а также поддерживает jquery-datatables.
Вы можете проверить это прямо сейчас на JSFiddle.
Ссылка на GitHub: https://github.com/HippotecLTD/realworld_jquery_jeditable_charcount
Добавьте эти строки в ваш HTML:
<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.jeditable.charcounter.realworld.min.js"></script>
<script async src="https://cdn.jsdelivr.net/gh/HippotecLTD/[email protected]/dist/jquery.charcounter.realworld.min.js"></script>
А потом:
$("#myTextArea4").charCounter();
$(document).ready(function() {
var count = $("h1").text().length;
alert(count);
});
Кроме того, вы можете поставить свой собственный идентификатор элемента или класса вместо "h1", и событие длины подсчитывает ваши символы строки текстовой области ☻
$('#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);
}
});
U может использовать:
$(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);
}
});
});