Javascript text field live view - javascript

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());
});
});

Related

Text Area in JSP Enter to implement a functionality

I am using Spring MVC and I have created a textArea in it, I want to add a functionality: When user presses 'Enter' two times the cursor will automatically go to next line and indicate the paragraph number in the new line:
Here is the code for TextArea:
<textarea name="notings" style="width:800px ; height:200px" ></textarea>
Example:
Users types something ...
................................ //Presses enter key 2 times consecutively
types something else....
I am clueless in implementing this functionality. I am a starter at front end development and don't know javascript as well. A little help will be much appreciated.
If someone could point me towards the right direction, that will also help alot
Thanks in advance
You try this way
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var pn=1;
var count=0;
function newLineFun(e)
{
if(e.keyCode==13)
{
count++;
if(count==2)
{
count=0;
var oldData=$("#txtArea").val();
$("#txtArea").val(oldData+pn);
pn++;
}
}
else{
count=0;
}
}
</script>
</head>
<body>
<textarea id="txtArea" name="notings" style="width:800px ; height:200px" onkeypress="newLineFun(event)"></textarea>
</body>
</html>

Javascript Textbox to Variable

I have been working on a little project for a day or two. The code is the following.
<!DOCTYPE html>
<html>
<head>
<script>
function search()
{
document.getElementById("text1").value
window.location.hash = "myVariable";
}
</script>
</head>
</body>
<form name="myform">
<input type="text" name="text1" value="">
<input type="button" value="Search" onclick="search()">
</form>
<div style="height: 4000px"></div>
<span id='yeah'>I have successfully jumped.</span>
<div style="height: 4000px"></div>
</body>
</html>
Now you may be wondering what am I trying to accomplish with this code? Well, I want to be to enter a value in the text box and then it will jump me to the section (the section is the value in the text box). It is sort of like a search engine, but it is not.
For example the section is yeah. When a user enters yeah in the text box it is supposed to jump them to the yeah section. Instead nothing happens. And despite looking all over the Internet I have not found an answer that satisfies my needs, so I would kindly ask that you please explain to me what my problem is and possibly give me a solution to my problem.
I am using the Mozilla Firefox web browser (if that information is necessary).
Try this:
function search()
{
var elID= document.getElementById("text1").value;
var el = document.getElementById(elID);
el.scrollIntoView(true);
}
The Element.scrollIntoView() method scrolls the element into view
Online Demo
Dalorzo's should work, but jQuery could be the better option than raw javascript if you plan to add more than just this function.
Here's a fiddle of what you're trying to do.
$("#button1").click(function() {
var t = $("#text1").val();
alert(t);
$('html, body').animate({
scrollTop: $("#"+t).offset().top
}, 2000);
});

Why won't JavaScript run?

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.

Javascript Remaining Characters without input

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>

jQuery .append() not appending to textarea after text edited

Take the following page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.
2 things.
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example:
http://jsfiddle.net/Hhptn/
Use the val() function :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"></textarea>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
$("#text-box").val($("#text-box").val() + txt);
});
});
</script>
</body>
</html>
Does that help?
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
You can reference by value of textarea.
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();

Categories