i'm writing an asp page using vb.net and i need to count the number of characters in my textarea and display the message:"X characters Remaining."
that's my asp code:
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
</td>
Here is a JSFiddle
HTML:
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
<p id="message"></p>
JS:
var area = document.getElementById("content_txt");
var message = document.getElementById("message");
var maxLength = 50;
var checkLength = function() {
if(area.value.length < maxLength) {
message.innerHTML = (maxLength-area.value.length) + " characters remaining";
}
}
setInterval(checkLength, 300);
I have a little but functional solution my friend, try this:
HTML CODE
<textarea name="message"placeholder="Reply message..." maxlength="155" onkeyup="counter(this);"></textarea>
<div id="counter_div">0/155</div>
JAVASCRIPT CODE
<script>
function counter(msg){
document.getElementById('counter_div').innerHTML = msg.value.length+'/155';
}
</script>
This case limit 155 characters.
this will return current length of the textarea using jquery var length = $('#content_txt').val().length; and rest of the logic you have to give it a try..
try this
function fix(dis)
{
var total=50; // ho many you want to show
var val = dis.value;
var count = val.length;
document.getElementById('remaining').innerHTML= total-count;
}
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50" onkeyup="fix(this)"></textarea>
</td>
<p><span id="remaining">0</span> Characters remaining</p>
<td valign='top'>
<textarea rows="5" id="content_txt" name="TextArea1" runat="server" maxlength="50"></textarea>
<span id="character-count">100</span> characters remaining.
</td>
var totallength = 100;
$('textarea#input').on('keydown, keyup', function(e) {
$('span#character-count').text((totallength - input.val().length));
});
Related
I would like to find and replace the text in my textbox.
this is my script
<script>
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var resultString = str.replace(find, replace);
var numreplace = new RegExp(find, 'g');
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
</script>
and here is my html code
<html>
<body>
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hello Testing
</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" onkeyup="replaceNum()" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" onkeyup="replaceNum()" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace"
onclick="findnReplace()" title="Fill in both textbox"/>
<span id="num"></span>
</table>
</body>
</html>
expected result:
however, this is what i am getting:
ALTHOUGH it says "3words replaced" but the text in the textbox didnt get replaced.
On your script, you have run str.replace function without regex. So it will replace the first match only.
You have defined numreplace regex but have not used it.
So to make it work, it is needed to place str.replace after numreplace variable definition and use that regex inside str.replace function as follows.
function findnReplace() {
var str = document.getElementById("source").value;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var numreplace = new RegExp(find, 'g');
var resultString = str.replace(numreplace, replace);
document.getElementById("source").innerHTML = resultString;
//find the number of words found and replaced
var num = str.match(numreplace).length;
if (num == 0) {
var no = "No words are replaced.";
document.getElementById("num").innerHTML = no;
} else {
var n = num + " word(s) replaced.";
document.getElementById("num").innerHTML = n;
}
}
<table>
<textarea name="text" id="source" rows="3" cols="20" required>Hi Hi Hi Hi Testing</textarea><br><br>
<tr>
<td>Find:</td>
<td>
<input type="text" id="find" name="find" size="30">
</td>
</tr>
<tr>
<td>Replace:</td>
<td>
<input type="text" id="replace" name="replace" size="30">
</td>
</tr>
</table>
<input id="findnReplaceButton" type="button" value="Find & Replace" onclick="findnReplace()"
title="Fill in both textbox" />
<span id="num"></span>
</table>
I am using tinymce for a textarea and i want to cout the characters inside of it.
Now i use this code:
<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea>
<br />
<div class="character_count"></div>
<script type="text/javascript">
tinymce.init({
selector: '.tinymce',
width: 400,
setup: function (ed) {
ed.on('keyup', function (e) {
var count = CountCharacters();
var x = $(".character_count");
x[0].innerHTML = "Characters: " + count;
});
}
});
function CountCharacters() {
var body = tinymce.activeEditor.getBody();
var content = tinymce.trim(body.innerText || body.textContent);
return content.length;
};
</script>
This works fine, except the number of characters is displayed only in the first div (because of x[0]
is it possible to show, whatever textarea i am typing in, to display the characters in ever div <div class="character_count"></div> ?
Yes, relace this line x[0].innerHTML = "Characters: " + count; with this
x.each( function() { $(this).text("Characters: " + count); });
const p = $("p")
$("input").on("input", function(e) {
p.each(function() {
$(this).text(e.target.value)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" />
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
I just started learning JavaScript. I have a question. When there are more than 160 characters, I do not want to type characters. How can I solve this problem?
<body> <textarea onkeypress="olay()" id="twitter" cols="30" rows="10"></textarea> <br>
<div id="sonuc"></div>
</body>
<script type="text/javascript">
i = 0;
function olay() {
i += 1;
if (i > 160) {
document.getElementById("sonuc").innerHTML = "Warning. Over 160 character";
document.getElementById("twitter").addEventListener("onkeypress", function(event)) {
event.preventDefault();
}
} else {
document.getElementById("sonuc").innerHTML = "Numver of charecter : " + i;
}
}
</script>
You don’t need JavaScript; text inputs have a maxlength attribute.
<textarea
onkeypress="olay()"
id="twitter"
cols="30"
rows="10"
maxlength="160"></textarea>
This is with html
<textarea
id="twitter"
cols="30"
rows="10"
maxlength="160"
placeholder="Enter text here...">
</textarea>
This how you would do it with JavaScript and HTML.
<body>
<textarea id="twitter" cols="30" rows="10" maxlength="160" placeholder="Enter text here..."></textarea><br>
<div id="sonuc"></div>
<script type="text/javascript">
function olay() {
var text = document.getElementById("twitter").innerHTML;
var i = text.length;
if (i >= 160) {
document.getElementById("sonuc").innerHTML = "Warning. Reached 160 character limit.";
}
else {
document.getElementById("sonuc").innerHTML = "Number of charecter : " + i;
}
}
document.addEventListener("keypress", function(){
olay();
});
document.addEventListener("keydown", function(){
olay();
});
</script>
</body>
the best you can do is write a regex and check every time on keypress.
I have a user enter biograpgy in a text box html for that is
<p>Biography:
<input type="text" id="biography" name="biography" />
<span id="biographyInvalid" style="color:red; visibility:hidden"> Biography is Invalid </span>
</p>
for Javascript i have a checkme function that is called and i want to do a check inside of it
function checkme(){
var biography=document.getElementById('biography').value;
}
how can i count number of words, do i first convert it to string and then separate with spaces
<div>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>
and js
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Full ');
}
return false;
});
});
</script>
$('#contentbox').keyup(function(){} - contentbox is the ID of the textbox.
Using $(this).val() getting the textbox value.
bar is the div ID of the count meter $('#bar').animate() increasing the width.
js:
$('#biography').keyup(function () {
var words = this.value.match(/\S+/g).length;
$('#count').html('Words Count:'+words);
});
HTML:
<div id="count"></div>
This gives you correct words count
This is working example
the HTML
<form name="myform" method="post" action="">
<textarea name="inpString" cols="80" rows="4" onkeyup="countNoOfWords()" >This is a sample text that has been typed to count the number of words it contains. Click the button below to find out.</textarea>
<br />
<input name="noofwords" type="text" value="" size="6" />
</form>
The JS function
<script type="text/javascript">
function countNoOfWords(){
document.myform.noofwords.value = document.myform.post_content.value.split(' ').length;
}
</script>
reference
$('input').keyup(function() {
var cs = this.value.match(/\S+/g).length;
$('#biography').text(cs);
});
Demo - http://jsfiddle.net/hNn5b/685/
Example here: http://jsfiddle.net/67XDq/1/
I have the following HTML:
<tr id="rq17">
<td class='qnum'>17.</td>
<td class='qtext'>Questions? <i>Maximum of 500 characters - <input style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/>
<textarea
onKeyDown="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500);"
onKeyUp="textCounter(document.frmSurvey.q17,document.frmSurvey.q17length,500)"
class="scanwid" name="q17" id="q17" rows="5" cols="">
</textarea>
</td>
</tr>
And the following Javascript:
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
For some reason, which I am completely missing, this doesn't seem to be working as intended.
It should limited the number of characters in the textarea and also countdown the number within the label but it is doing neither.
There are two issues in the fiddle
no form element
script mode was onload, which means that window object didnt have textCounter function
see updated fiddle http://jsfiddle.net/67XDq/7/, markup:
<tr id="rq17">
<td class='qnum'>17.</td>
<td class='qtext'>
Questions? <i>Maximum of 500 characters -
<input style="color:red;font-size:12pt;font-style:italic;" readonly="readonly" type="text" id='q17length' name="q17length" size="3" maxlength="3" value="500" /> characters left</i>
<br />
<textarea
onKeyDown="textCounter(this,'q17length',500);"
onKeyUp="textCounter(this,'q17length',500)"
class="scanwid" name="q17" id="q17" rows="5" cols=""></textarea>
</td>
</tr>
and code
function textCounter(field, cnt, maxlimit) {
var cntfield = document.getElementById(cnt)
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
CHange your html to remove all that onkey stuff
<tr id="rq17">
<td class='qnum'>17.</td>
<td class='qtext'>Questions? <i>Maximum of 500 characters - <input id="charsLeft" style="color:red;font-size:12pt;font-style:italic;" readonly type="text" name="q17length" size="3" maxlength="3" value="500"> characters left</i><br/><textarea class="scanwid" name="q17" id="q17" rows="5" cols="" maxlength="500"></textarea></td>
</tr>
And the javascript is this:
$("#q17").keyup(function() {
$('#charsLeft').val(500 - $(this).val().length);
});
Here's a fiddle: http://jsfiddle.net/67XDq/11/
see fiddle: http://jsfiddle.net/abhiklpm/67XDq/15/
modified the function:
function textCounter(field, cntfield, maxlimit) {
if (document.getElementById(field).value.length > maxlimit) {
// if too long...trim it!
document.getElementById(field).value = document.getElementById(field).value.substring(0, maxlimit);
}
// otherwise, update 'characters left' counter
else {
document.getElementById(cntfield).value = maxlimit - document.getElementById(field).value.length;
}
}
also you were missing id id="q17length" in your html
edited: also u were not passing the ids as string: textCounter('q17','q17length','500');
var tweet = prompt("Write Tweet:");
var tweetCount = tweet.length;
alert("You have written " + tweetCount + " characters, you have " + (140- tweetCount) + " Chartacters remaining")