テキストエリアの文字数をカウントしたいので、次のように作成しました。
<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);
}
};
コードの何が問題になっていますか? それは動作しません！ええと、それは初心者の手書きでした。助けが必要です。
ブラウザにどのようなエラーが表示されますか? あなたが投稿したものが不完全だった場合、なぜあなたのコードが機能しないのか理解できますが、それを知らなければ、確かなことはわかりません.
制限を超えている場合は、おそらく charNum div をクリアするか、何かを書き込む必要があります。
function countChar(val) {
var len = val.value.length;
if (len >= 500) {
val.value = val.value.substring(0, 500);
} else {
$('#charNum').text(500 - len);
}
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum"></div>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');
}
});
カウンターが必要な場所で使用される HTML サンプルでは、テキストエリアの ID と 2 番目のスパン : 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>
</body>通常、テンプレート ファイルの前に配置される JavaScript 関数には、 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()。
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);
});
});
まあ、これは言われていることとそれほど違いはありませんが、これはすべてのブラウザで非常にうまく機能します.
アイデアは、定義された長さを超えるテキストを削除することです。
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>
上記を組み合わせて作りました。これにより、テキスト入力の中断が可能になり、バックスペースが可能になり、さらにバックスペースを使用してもカウントが保持されます。
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>
私の前のポスターの功績です!! これが誰かを助けることを願っています!
このタスク用に独自の 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 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 の使用をスキップし、負のカウントの取得もスキップします。
HERE私はそれをかなりコンパクトにしました。任意のボタンを再度有効にすることができました
var x = document.getElementById("password");
x.addEventListener("input" , event =>{
var target = event.currentTarget;
var maxlength = target.getAttribute("maxlength");
//current length
var clength = target.value.length;
//checking if length is 10 or not
if(clength == 10 ){
//enabling the button
var btn = document.getElementById("btn");
btn.disabled = false;
}
//printing the current values
document.getElementById("return") .innerText = clength;
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<textarea maxlength="10" id="password" required > </textarea>
<button id="btn" disabled> submit </button>
<div id="return"></div>
<script src="script.js"></script>
</body>
</html>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);
}
});
});