giving color to substring after javascript split() - javascript

i want to print the text entered in textarea with different colors means i am seperating the string with split() method it works fine then i want to print the substrings in textarea with colors how is it possible
<script type="text/javascript">
function init() {
document.getElementById('txtarea2').focus();
}
function setcolor() {
var str=document.getElementById('txtarea2').value;
var str1=str.split(":");
var first= str1[0];
var second=str1[1];
document.getElementById('txtarea1').value= first + second;
document.getElementById('txtarea2').focus();
}
</script>
<body onload="init()">
<textarea id="txtarea1" rows="3" cols="20"></textarea>
<textarea id="txtarea2" rows="3" cols="20" onChange="setcolor()"></textarea>
</body>
please help me

make an empty div and use it to append
<div id="newDiv"></div>
then create and append two different tags to to this div
first = '<a style="color:red">'+first+'</a>';
second = '<a style="color:blue">'+second+'</a>';
document.getElementById("newDiv").innerHTML=first+second;

Do you mean:
document.getElementById('txtarea1').style.color = 'red';

As far as I know, it is not possible to have multiple colors in a single HTML textarea like you want.

You can not have different color text in a textarea.
You would need to use a rich editor to do that.
If the text is not editable, than use a div/pre to output it and color it with normal css tags.

Related

How can I make HTML code non-execute?

What I want to do is allow the user to input a string then display that string in the web page inside a div element, but I don't want the user to be able to add a bold tag or anything that would actually make the HTML text bold. How could I make it so the text entered by the user does not get converted into HTML code, if the text has an HTML tag in it?
Use createTextNode(value) and append it to your element(Standard solution) or innerText(Non standard solution) instead of innerHTML.
For a JQuery solution look at Dan Weber's answer.
here's a neat little function to sanitize untrusted text:
function sanitize(ht){ // tested in ff, ch, ie9+
return new Option(ht).innerHTML;
}
example input/output:
sanitize(" Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World");
// == " Hello <img src=data:image/png, onmouseover=alert(666) onerror=alert(666)> World"
It will achieve the same results as setting elm.textContent=str;, but as a function, you can use it easier inline, like to run markdown after you sanitize() so that you can pretty-format input (eg. linking URLs) without running arbitrary HTML from the user.
use .text() when setting the text in the div rather than .HTML. This will render it as text instead of html.
$(document).ready(function() {
// Handler for .ready() called.
$("#change-it").click(function() {
var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
$('#users-text').text(userLink);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button>
<br>
<div id="users-text"></div>
Why not simply use .text() ?
$('#in').on('keyup', function(e) {
$('#out').text($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="in">
<br>
<div id="out"></div>

how to concatenate two text areas into one paragraph

I am trying to concatenate two text areas into a paragraph. The two text areas are where a user can enter data and then push a button and have the results displayed in a paragraph.
I cant figure out why I cant get the two text areas to concatenate into a paragraph html element. I did figure out that I can with the same function have the result shown in an additional text area but when I switch the element back to a paragraph..."p" rather than "textarea" my code no longer functions properly.
javascript:
function concatenate(){
document.getElementById("result1").value =
document.getElementById("text_area_1").value + " " +
document.getElementById("text_area_2").value;
}
html:
<div id="requirement #1">
<h1> Requirement #1</h1>
<textarea id="text_area_1"></textarea>
<textarea id="text_area_2"></textarea>
<button type="button" id="button1" onclick="concatenate()">concatenate</button>
<p id="result1"></p
</div>
Im not sure why if I change the "p" to a "textarea" element my function works but when I use the "p" tag, it does not work. I think it may have to do with the document.getElementById(...) using ".value" ? maybe I should be using something else?
result1 doesn't have a value property. It's not a field, it's an HTMLParagraphElement. Use result1.innerHTML instead.
Of course, you may want to HTML escape the contents of the textarea so that you don't accidentally break your own page, in which case you should use result1.textContent.
You are not setting the value for 'result1' properly.
Try this:
function concatenate(){
//I modified this line, changed .value for .innerHTML
document.getElementById("result1").innerHTML =
document.getElementById("text_area_1").value + " " +
document.getElementById("text_area_2").value;
}
<div id="requirement #1">
<h1> Requirement #1</h1>
<textarea id="text_area_1"></textarea>
<textarea id="text_area_2"></textarea>
<button type="button" id="button1" onclick="concatenate()">concatenate</button>
<p id="result1"></p
</div>

Unable to change color of keywords within a text area

I am attempting to write a program that can detect if you inserted a JavaScript keyword, and if you have, it will change the color of it so it will stand out(It will eventually submit the code and I will use it for offline debugging on a chromebook). However, it seems that I cannot change the color of the text within the textfield when it matches a keyword. jsFiddle Example
Here is the code:
CSS:
#JScodeinputbox{font-family:Arial;}
#JScodeoutputbox{}
.JSfunctions{color:blue;}
HTML:
<body>
<textarea id="JScodeinputbox" wrap="logical" rows="30" cols="70" onkeyup="checkHighlight();"></textarea>
<canvas>
</canvas>
</body>
</html>
JavaScript:
var codeInput = document.getElementsByTagName("textarea");
var keywords = new Array("var", "if");
function checkHighlight(){
var codeInput1 = codeInput[0].value;
if(codeInput1 === keywords[0]){
keywords[0].indexOf(codeInput1).className = "JSfunctions";
}
}
If anyone know how to resolve this issue or simpler alternatives(preferrably not involving JQuery, PHP, etc.) it would be much appreciated.
PS: I know it is not about it being onkeyup, I have that for a reason. It also works when I run other methods, so I don't think it's formatting, either(but it could be).
You can use JQuery Highlight Textarea plugin with this code (sample from site)
<textarea cols="50" rows="5">...</textarea>
<script>
$('textarea').highlightTextarea({
words: ['Lorem ipsum', 'vulputate']
});
</script>
and problem solved

Change color of font after specific code

When a code is typed in like ^1 in a textarea i want the font color of any text after that code to be changed to whatever color the ^1 is assigned to,
As of now i have the following:
<form method="post" action="index.php">
<textarea id="text" onkeypressed="changecolor()"></textarea>
<input type="submit" value="Add">
</form>
javascript:
function changecolor() { //code here }
so basically when i type in ^1 and the color blue is assigned to that code, the text after that code will be in the color blue, but when a second code is typed in; example ^2 the text after that will be the color that is assigned to that code,
I know very well how to insert data into a database, but i need to beable to find a way of getting the raw data; i.e the data that was orginally typed into the textarea with the codes like ^1 and ^2
Help is really appreciated!
You cant target specific fragments of text in a textarea. What you want to do can't be done of my knowing, unless you monitor its content and add an abstract div layer to output styled html from it.
Many wysiwyg text editors do it like this, or use the 'contenteditable' attribute to allow html editing in modern browsers...
You can start like this:
<script type="text/javascript">
var display, input, displayHtml;
function init(){
display = document.getElementById('display');
input = document.getElementById('input');
}
function onContentChange(){
displayHtml = parseContent(this.value);
display.innerHtml = displayHtml;
}
function parseContent(text){
var html = ... // Generate html according to content
return html;
}
document.onload=init;
</script>
html:
<textarea id='input' onkeypress="javascript:onContentChange" />
<div id='display'></div>

Javascript form innerHTML

i have an issue with innerHTML and getElementsById(); method but I am not sure if these two methods are the root of the issues i have.
here goes my code :
<script type="text/javascript">
function clearTextField(){
document.getElementsById("commentText").value = "";
};
function sendComment(){
var commentaire = document.getElementById("commentText").value;
var htmlPresent = document.getElementById("posted");
htmlPresent.innerHTML = commentaire;
clearTextField();
};
</script>
and my HTML code goes like this:
<!doctype html>
<html>
<head></head>
<body>
<p id="posted">
Text to replaced when user click Send a comment button
</p>
<form>
<textarea id="commentText" type="text" name="comment" rows="10" cols="40"></textarea>
<button id="send" onclick="sendComment()">Send a comment</button>
</form>
</body>
</html>
So theorically, this code would get the user input from the textarea and replace the text in between the <p> markups. It actually works for half a second : I see the text rapidly change to what user have put in the textarea, the text between the <p> markup is replaced by user input from <textarea> and it goes immediately back to the original text.
Afterward, when I check the source code, html code hasn't changed one bit, given the html should have been replaced by whatever user input from the textarea.
I have tried three different broswer, I also have tried with getElementByTagName(); method without success.
Do I miss something ? My code seems legit and clean, but something is escaping my grasp.
What I wanted out of this code is to replace HTML code between a given markup (like <p>) by the user input in the textarea, but it only replace it for a few milliseconds and return to original html.
Any help would be appreciated.
EDIT : I want to add text to the html page. changing the text visible on the page. not necessarily in the source. . .
There is no document.getElementsById, however there is a document.getElementById. This is probably the source of your problem.
I don't think there is any document.getElementsById function. It should be document.getElementById.
"To set or get the text value of input or textarea elements, use the .val() method."
Check out the jquery site... http://api.jquery.com/val/

Categories

Resources