Is it possible to have a pure Javascript text remaining counter that outputs the value in a <span> or <p> tag rather than an input field? I can only find Jquery solutions or ones that output in input fields.
Have seen over the net that a lot of people are wanting a remaining characters counter that is pure Javascript and doesn't preview the number in an input box. I was messing around with JSFiddle lastnight and did a little work around and was able to get the remaining characters to show in other tags such as <span>. So I would just like to share this with everyone and hope it might come in handy.
HTML:
<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>
Javascript:
<script>
function textCounter(textarea, countdown, maxlimit) {
var textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
}
</script>
<script type="text/javascript">
textCounter('message','messagecount',100);
</script>
Here is also a working JSFiddle
Note: Should anyone want to contribute to the script to make it better, please feel free to do so. I am not an expert in Javascript so it most likely a more user friendly solution.
Kind Regards
something like the following should also work if you put jQuery on the page (and why wouldn't you :)):
$('#text-input-area').keyup(function(){
$('#target-div').text(max_length-$(this).val().length + " characters remaining");
})
Lodder's answer is perfect - except that I could not re-use it on the same page. I have tweaked the code to pass the name of the span, so it can be re-used on the same page.
<script>
function textCounter(textarea, countdown, maxlimit, nameofspan) {
var textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById(nameofspan).innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
}
</script>
<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100,'messagespan');" onKeyUp="textCounter('message','messagecount',100,'messagespan');"></textarea>
<span id="messagespan"></span>
<script type="text/javascript">
textCounter('message','messagecount',100,'messagespan');
</script>
Related
I did a script that help me to make a web page in realtime, I can put html and css and everything work well, but I can't execute javascript because I am using a editor based in string, can you help me to find a way to execute javascript in this editor?
Pay attention, with this simple script you can put a whole page's code with CSS and HTML without escape and you'll see a formated page, but JAVASCRIPT don't work in this script.
function html() {
var str = document.getElementById("go").value;
document.getElementById("show").innerHTML = str;
}
<p id="show"></p>
<textarea id="go" onKeyUp="html()" width="100%" cols="50" rows="10">
</textarea>
UPDATE, at last, I got, this editor execute javascript too! Now I can build a whole page with javascript inside, thank you for the answers!!!
$(document).ready(function(){
$('#editor').keyup(function(){
$('#page').html($(this).val());
});
});
<p id="page"></p>
<textarea id="editor" width="100%" cols="50" rows="10" placeholder="you can use html, css and javascript here..."></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You are adding everything in a paragraph tag. That is why nothing in script tags are working. You might want to append everything in the body tag:
function html() {
var str = document.getElementById("go").value;
document.getElementsByTagName("body")[0].innerHTML = str;
}
Can you clarify what you mean by "find a way to execute javascript in this editor?" What are you desired results?
Javascript won't run automatically like that, u need eval() to run it, I would suggest something like this:
Although it increases the security risk but it is one of the only ways to do it.
function html1() {
var str1 = document.getElementById("go1").value;
document.getElementById("show1").innerHTML = str1;
}
function html2() {
var str2 = document.getElementById("go2").value;
document.getElementById("show2").innerHTML = eval(str2);
}
<p id="show1"></p>
<p id="show2"></p>
<textarea id="go1" onKeyUp="html1()" width="100%" cols="50" rows="10"> </textarea>
<textarea id="go2" width="100%" cols="50" rows="10"> </textarea>
<br><button onclick="html2()">Try it</button>
I was making an HTML code editor, I tested all of the HTML tags I know and they all work, except for script tags.
When I type <script>something</script> into the text area and click a button, the script doesn't execute.
Please help! Here is the code:
<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<button type="button">Run Code!</button>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here is the working code:
<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
<br/>
<button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here's a link to the JSFiddle: http://jsfiddle.net/Q2qLF/. I've removed some broken HTML, such as; a button shouldn't be contained in a anchor tag, I've added a 'onclick' in your button that will call the 'makeCode()' function and I've added the 'type="text/javascript"' into your script tag as this maximises compatibility.
Please let me know if you need any more help
I've updated my JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/
Now there are 2 textareas, one for the HTML and one for the Javascript. i've also created a new function called 'makejs', this takes the value of the Javascript textarea and runs it through a 'eval' - this executes the Javascript passed to it.
I've put the answer in a Fiddle here: http://jsfiddle.net/joshnicholson/P8eh9/
I'm not sure why you're wrapping the button element inside an anchor, but I would do it a slightly different way.
Here is the revised javascript:
var myButton = document.getElementById("btnRunCode");
myButton.addEventListener("click", makeCode);
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
I added an id of "btnRunCode" to your button element, just to make things easier for me. See the Fiddle.
I used this javascript code in my page & then checked against w3c validator. I got 2 errors which are:
there is no attribute "onKeyDown"
there is no attribute "onKeyUp"
I won't change my html declaration type to transitional. So I need modification in script.
Script HTML
<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>
Script Javascript:
<script>
function textCounter(textarea, countdown, maxlimit) {
var textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
}
</script>
<script type="text/javascript">
textCounter('message','messagecount',100);
</script>
Since I know nothing about javascript, I kindly ask you: what should be the modification so my page will be XHTML 1 strict validated? Or do I have to look for another script that is XHTML 1.0 Strict validated and does the same stuff?
Note: For the time being script works in this way: when you write in textarea, the part between two spans in <span id="charsleft"></span> appears and writes the number of remaining characters in real time. The way of showing style is not important for me. For example, first value (limit for number of characters) can be always visible. Only point is validation of W3C.Thanks, BR
The w3c validator includes a "How to fix" hint when it gives errors like that.
In your case, it says:
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case)...
That is, change the attribute names to be all lower case:
<textarea id="message" cols="20" rows="5" name="message" onkeydown="textCounter('message','messagecount',100);" onkeyup="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>
It would be better to remove the inline event attributes and add event handlers from the JS in your script block, but I'm feeling lazy so I'm declaring that out of scope. (Google "unobtrusive javascript" for some hints about that.)
I'm at my first hackathon and trying to finish my project. I am very very new the javascript... everything I know I literally learned in the last 2 hours. That being said...
So I know that eval is not the greatest thing to use, but I'm trying to write a simple program in which you can input a javascript snippet into a textarea, click an execute button, and have the javascript execute inside another textarea. I'm trying to stay away from jquery for now, because I want to get the really basic idea down before I add another level of complexity, which is why I'm not using id's.... but if jquery is the only way to do this, then I guess I'll have to pony up and learn it in the next 8 hours.
Code as follows (ish):
function executeJS ()
{
var result = eval(game.input.value);
game.execute.value=result;
}
<head>
<body>
<H1>PRogram</H1>
<form name="game">
<textarea name="execute" rows="5" cols="30" value=""></textarea><br>
<textarea type="text" name="input" rows="10" cols="30" value=""></textarea>
<input type = "button" value = "guess" onclick = "executeJS()</input>
</form>
</body>
</head>
I'm not getting an output in my execute box.
Any insight would be much appreciated.
"game" isn't a variable. it's a DOM element name.
if you want to get it's object, give it an id let's say "game", and use document.getElementById('game')
Note that your <head> surround the <body>
Your javascript code isn't inside <script></script tag.
Here is a working version. However, I would reconsider your idea of not using IDs or libraries:
function executeJS() {
var game = document.forms['game'];
var result = eval(game.input.value);
game.execute.value = result;
}
And be wary of eval.
I am trying to make a similar bit of code like at the bottom of this page to leave a comment. I have the basic code but the output does not register new lines (or HTML, but that isn't important). I have the function below called on key-up on the text field. Any help would be greatly appreciated. Thanks
Here is the whole page (Now working)
<html>
<body>
<form>
<textarea id="text" onkeyup="outputText()"></textarea>
</form>
<div id="outputtext" style="width:500px;">
</div>
</body>
<script type="text/javascript">
function outputText()
{
var text = document.getElementById('text').innerHTML;
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2');
}
</script>
</html>
document.getElementById('outputtext').innerHTML = (text + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1<br>$2')
Have you tried getting the textarea contents as
var text = document.getElementById('text').value; instead?
I think it's good for you to take a look at how tools like jQuery can make your live easier in this kind of cases. Your particular question is a bit unclear however...can you give us more details?
You can use the <pre> (preformatted) tag so that html and carriage returns are represented without doctoring the field input
html:
<input id="text" type="text" />
<pre id="outputtext"></pre>
jQuery:
$(document).ready(function () {
$('#text').keyup(function () {
$('#outputtext').html($(this).val());
});
});