I have a textarea on my site where I want to paste URLs.
Is this possible to create line break every time I paste URL? If not, can it create line break when I enter space?
I've searched for the solution but all i found is the solution to create line breaks after form submit which didn't help me.
Fiddle here: https://jsfiddle.net/3sj2644z/
this.value = this.value + "\n";
You listen for the paste event on the textarea and you grab the text that is currently in it and append a linebreak with the escape character \n to it and then place that new string value back into the textarea.
You don't use html in the textarea so the br tag doesn't work if you think so.
function ConvertToLinks() {
str = document.getElementById("S1").value;
str = str.replace(/\r\n|\n/g,'<br>');
document.getElementById('txtLinks').innerHTML = str;
}
<html>
<head>
<title>Text area redirect</title>
</head>
<body>
<textarea rows="5" id="S1" name="S1" cols="40">
Yahoo
Google
Web Developer
from Web
</textarea>
<br><button onclick="ConvertToLinks()">Convert to Links</button>
<div id="txtLinks" style="width:350px;min-height:100px;border:1px solid red"></div>
</body>
</html>
By http://www.codingforums.com/javascript-programming/195565-place-links-textarea.html
Related
I'm trying to learn more JavaScript by working on projects I'm interested in so pardon me if this is a very basic question.
I'm trying to build a tool that detects a string of words (preferably a text or JSON file) from the HTML page (in a div).
<html>
<title>Hello world</title>
<head>
</head>
<body>
<div class="print" id="print"></div>
<textarea class="textarea" class="answerBox" id="answerBox"></textarea>
<script>
var inputBox = document.getElementById('answerBox');
inputBox.onkeyup = function(){
document.getElementById('print').innerHTML = inputBox.value;
}
</script>
</body>
</html>
Here's what I've done so far: https://jsfiddle.net/mc3kqj4t/ It's basically still nothing but what I want to do is to type in something in the box, then as soon as I type the text instantly appears on the page but also while that happens I can see if any of the words that I typed contain certain keywords that match a RegEx (for example "fox" and it's permutations "f ox" or something like that). I need to reference an external file because the words need to be updated every now and then.
Can anyone help?
Thoughts:
You can store the input text in a variable and regex in another. (not sure in your case whether both are necessary)
Use JavaScript replace to replace regex matches, with your highlighted HTML.
Please refer to this demo based on your code.
<html>
<title>Vulgarism Sandbox</title>
<head>
</head>
<body>
<p>Try input in the textarea with some text containing `a\w+`</p>
<div class="print" id="print"></div>
<textarea class="textarea" class="answerBox" id="answerBox" value="abcde"></textarea>
<input value="a\w+" id="regexInput" />
<script>
var inputBox = document.getElementById('answerBox');
inputBox.onkeyup = function() {
const regexInput = new RegExp(document.getElementById('regexInput').value, 'ig');
const text = document.getElementById('answerBox').value;
// replace regex matches in input text, and add 'highlight' HTML
const renderText = text.replace(regexInput, match => `<b>${match}</b>`)
document.getElementById('print').innerHTML = renderText;
}
</script>
</body>
</html>
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 have one <textarea> tag in my website where the user can put there HTML code and see its preview. My problem is when the user enter code below mention in my <textarea> my preview functionality getting fail :
<html>
<textarea>Some code to show</textarea>
</html>
So question is how can I escape this html code in my <textarea> tag as I know the problem is coming because </textarea> tag.
Any solution on this please.
Edit
Question is about using </textarea> within a textarea.
Problem visible here: http://jsfiddle.net/hrP6F/
EDIT: for your purpose this would do:
<textarea>
Outside Textarea
<textarea>Inside Textarea</textarea>
</textarea>
source: How can I embed a textarea inside of another textarea in HTML?
Or use contenteditable like someone already mentioned -> click
FIRST ANSWER: Im not sure I understand perfectly but still. You want to display the code inside text area somewhere else for instance?
You could do that on click like this (I reckon you are not statically putting nested text areas in html?):
HTML:
<textarea id="textarea" >Something code to show</textarea>
<button onclick="show()">show</button>
<div id="showArea"></div>
JS:
function show(){
var t = document.getElementById('textarea').value;
document.getElementById('showArea').innerHTML = t;
}
This is of course if what you want is to display html that is inside textarea. you could also put another textarea inside first one and it will work.
If you want the results to display dynamically you could use
<textarea id="textarea" onkeyup="show()">Something code to show</textarea>
This works even if you put your code (html and text area) inside text area - it displays it, I tested it
You can add a output div for preview purpose. Below is the jQuery script
HTML
<textarea placeholder="Enter your html"><b>test</b></textarea>
Run
<div class="op"></div>
JS
$('.run').click(function(){
$('.op').html($('textarea').val());
return false;
});
DEMO
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>
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());
});
});