Give Each Word In An <input> A Random Colour - javascript

How can I Give Each Word In An <input> A Random Colour

You cannot change the Text colors inside an <input> field. You can however create a DIV under it or overlay it as suggested in a previous answer.
Here's an example that does that using Plain Old Javascript.
<html>
<head>
<title>Random Colors</title>
<script>
window.onload = function(){
var mytextbox = document.getElementById("mytext");
mytextbox.onblur = function(){
var words = mytextbox.value.split(' ');
var myDiv = document.getElementById("divText");
myDiv.innerHTML = '';
for(i = 0, len = words.length; i<len;i++){
myDiv.innerHTML += '<span>' + words[i] + '</span> ';
}
var spans = myDiv.getElementsByTagName('span');
for(i = 0, len = spans.length; i<len; i++){
spans[i].style.color = random_color();
}
}
}
function random_color()
{
var rint = Math.round(0xffffff * Math.random());
return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
}
</script>
</head>
<body>
<input type="text" id="mytext" />
<div id="divText"></div>
</body>
</html>
Random Color Function Source

I don't think that's possible.
You could overlay text on top of it, but you're getting into thedailywtf territory there.

You could use a div instead of an input.
Then give it CSS properties that makes it look an input.
And use the contentEditable property to edit it(an HTML5 thing that is supported by modern browsers and IE) if your browser audience allows it.
But then I guess you'll have to build something like a rich text editor "a la" google docs to allow your users to change the colors, which will guarantee you some funny working hours ;)

Use something like YUI Editor or FCKEditor

Related

Javascript - How can I replace text in HTML with text in script

I am new to javascript. I was thinking getelementbyid but i don't know how to make it work
Like the title, here is what I mean
For example I have in HTML:
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
So what I want is to make script to replace those fw_93 fw_94 to what I want.
For example
Instead of displaying "fw_93" I want it to display "9.3". Same with fw_94 to 9.4
Replace fw_ with nothing, divide the number by 10:
Array.prototype.forEach.call(document.getElementsByTagName('p'), function(el) {
el.innerHTML = parseInt(el.innerHTML.replace(/[A-Za-z_]*/, '')) / 10;
});
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
Okay so select the tags.
Loop over the collection
read the html
match the string
replace the html
var ps = document.querySelectorAll("p");
for (var i=0; i<ps.length; i++) {
var p = ps[i];
var txt = p.innerHTML; //.textContent
var updated = txt.replace(/.+(\d)(\d)/, "$1.$2");
p.innerHTML = updated;
}
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
Using JQuery
Not sure why I did it with JQuery, guess I wasn't paying enough attention. No point in me re-writing as there are already good answers in JS. Though I will leave this in case it's of use to anyone that is using JQuery.
You can loop though each <p> element and covert the contents, something like this:
$("p").each(function() {
var text = $(this).html();
var text = text.substring(text.indexOf("_") + 1);
var text = text[0] + "." + text.substring(1);
$(this).html(text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>fw_93</p>
<p>fw_94</p>
<p>fw_93</p>
You may need to add validation depending on how reliable your input is.
Note that the code makes the following assumptions:
There will always be a _ followed by at least 2 digits
The . will always go after the first digit
Your HTML:
<p id="p1">init_value</p>
Your JS:
document.getElementById("p1").innerHTML = "new_value";

variable is null when pulling from a div

Sorry in advance for the extremely banal question, I'm positive I am missing something extremely simple. Without further adieu;
I'm getting a type error when I try to pull a block of text, and a button, from a div in my HTML. The div has an id that I am accurately referencing. For oversight, I am attempting to retrieve the text, apply coloring to each word (cycling through red, blue, and green), and replace the original text with my colored text. It works fine in JSFiddle, but I cannot get the data to retrieve in espresso - transcribeText is null.
var transcribeText = document.getElementById("divideTranscript");
transcribeText.onclick = function() {
var words = document.getElementById("transcriptText");
var textArray = words.innerHTML.split(" ");
var count = 0;
var colorArr = ["red", "blue", "green"];
var newWords = document.createElement("div");
for(var i = 0; i < textArray.length; i++){
var item = textArray[i];
var newSpan = document.createElement("span");
var newText = document.createTextNode(item);
var dotNode = document.createTextNode(" ");
newSpan.className = colorArr[count % 3];
newSpan.id = "word"+i;
newSpan.appendChild(newText);
newSpan.appendChild(dotNode);
count++;
};
words.parentNode.replaceChild(newWords, words);
}
<div id="transcriptText"> It’s that time of year when you clean out your
closets, dust off shelves, and spruce up your floors. Once you’ve taken
care of the dust and dirt, what about some digital cleaning? Going
through all your files and computers may seem like a daunting task, but
we found ways to make the process fairly painless.</div>
<br>
<div id="divideTranscript" class="button"> Transform the
Transcript! </div>
Your problem is that the javascript runs before the HTML exists, therefore, you cannot get any ids. There are several ways around this. First is my favorite:
window.onload = function name() {
//code to be excuted
}
The function will be called after HTML has loaded. body.onload = function name() also works.
The second method (no pun intended haha) is to put the script tag at the end of the body tag.
<body>
<script></script>
</body>
Personally, I use the first one more commonly because I have a template I religiously use, and I don't like moving tags around. That's just me, whatever works for you! Hope this Helps!

get selected value in label using JavaScript dynamically

I have to print 10 values dynamically in javascript using for loop. Here I take label for printing.
Now when I click on particular text on label I can show one alert with that text name,
Any One help me How to do this.
<html>
<head>
<script type = "text/javascript">
var x = "";
function checkCookie(){
var arr = new Array("One","Two","Three");
for(var i=0; i<arr.length; i++) {
x = x + arr[i] + "<br>" + "<br>";
document.getElementById("idval").innerHTML = x;
}
}
function getItem(){
// here i want to display the selected label item
}
</script>
</head>
<body onload = "checkCookie()">
<label id = "idval" onclick = "getItem()"> </label>
</body>
</html>
Not at all clear from your question description what it is you need. If what you're wanting is to dynamically create labels, and have access to their onclick events; have a look at the Javascript functions appendChild and setAttribute. I've created a JSfiddle which demonstrates what you might need:
function createLabels() {
for(var i=0; i<10; i++) {
var label = document.createElement('label');
label.innerHTML = "item " + i;
label.onclick = onClick;
document.body.appendChild(label);
}
}
function onClick(e){
alert(e.srcElement.innerHTML)
}
http://jsfiddle.net/R4abH/2/
Edit 1 : Adding onclick attributes is considered bad practise. Reworked answer using event listeners instead.
Edit 2 : As per Benjamin Gruenbaum's comment below, AddEventListener does not seem to be supported by IE (please see MSIE and addEventListener Problem in Javascript?). Reworked jsfiddle to use onclick instead, as per dystroy's suggestion.

How to add / insert / update text inside contenteditable div at a particular position?

The HTML code looks like this
<div id="txtarea" contenteditable="true">Some text</div>
I have to insert some new text based on some event at a particular position in the above div.
The event calls the function say updateDiv(txt, positon). For example it says
updateDiv("more ",5);
So the div should become be
<div id="txtarea" contenteditable="true">Some more text</div>
I tried a lot of javascript and jquery but nothing seem to work.
If the content of your editable <div> always consists of a single text node, this is relatively simple and you can use the code below.
var div = document.getElementById("txtarea");
var textNode = div.firstChild;
textNode.data = textNode.data.slice(0, 5) + "more " + textNode.data.slice(5);
Otherwise, you'll need to read about DOM Ranges (note that they are not supported in IE < 9) and use something like this answer to create a range corresponding to character indices within the content and then use insertNode().
var div = document.getElementById("txtarea");
var range = createRangeFromCharacterIndices(div, 5, 5);
range.insertNode(document.createTextNode("more "));
Here's how I did it:
var position = 5,
txt = "more ";
var current = $("#txtarea").html();
//alert(current.substring(0, position))
var endVal = current.substring(position);
var newValue = current.substring(0, position) + txt + endVal;
$("#txtarea").html(newValue);​
jsfiddle displaying it 'in action'.
Edit: Updated the jsfiddle with the approach listed in a comment above to this post. Pretty slick!
use this function :
String.prototype.splice = function( position, newstring ) {
return (this.slice(0,position) + newstring + this.slice(position));
};
and use this function as :
var oldstr=$('#txtarea').html();
var newstr='more';
var position = 5;
$('#txtarea').html(oldstr.splice(position , newstr);

Find html label associated with a given input

Let's say I have an html form. Each input/select/textarea will have a corresponding <label> with the for attribute set to the id of it's companion. In this case, I know that each input will only have a single label.
Given an input element in javascript — via an onkeyup event, for example — what's the best way to find it's associated label?
If you are using jQuery you can do something like this
$('label[for="foo"]').hide ();
If you aren't using jQuery you'll have to search for the label. Here is a function that takes the element as an argument and returns the associated label
function findLableForControl(el) {
var idVal = el.id;
labels = document.getElementsByTagName('label');
for( var i = 0; i < labels.length; i++ ) {
if (labels[i].htmlFor == idVal)
return labels[i];
}
}
First, scan the page for labels, and assign a reference to the label from the actual form element:
var labels = document.getElementsByTagName('LABEL');
for (var i = 0; i < labels.length; i++) {
if (labels[i].htmlFor != '') {
var elem = document.getElementById(labels[i].htmlFor);
if (elem)
elem.label = labels[i];
}
}
Then, you can simply go:
document.getElementById('MyFormElem').label.innerHTML = 'Look ma this works!';
No need for a lookup array :)
There is a labels property in the HTML5 standard which points to labels which are associated to an input element.
So you could use something like this (support for native labels property but with a fallback for retrieving labels in case the browser doesn't support it)...
var getLabelsForInputElement = function(element) {
var labels = [];
var id = element.id;
if (element.labels) {
return element.labels;
}
id && Array.prototype.push
.apply(labels, document.querySelector("label[for='" + id + "']"));
while (element = element.parentNode) {
if (element.tagName.toLowerCase() == "label") {
labels.push(element);
}
}
return labels;
};
// ES6
var getLabelsForInputElement = (element) => {
let labels;
let id = element.id;
if (element.labels) {
return element.labels;
}
if (id) {
labels = Array.from(document.querySelector(`label[for='${id}']`)));
}
while (element = element.parentNode) {
if (element.tagName.toLowerCase() == "label") {
labels.push(element);
}
}
return labels;
};
Even easier if you're using jQuery...
var getLabelsForInputElement = function(element) {
var labels = $();
var id = element.id;
if (element.labels) {
return element.labels;
}
id && (labels = $("label[for='" + id + "']")));
labels = labels.add($(element).parents("label"));
return labels;
};
document.querySelector("label[for=" + vHtmlInputElement.id + "]");
This answers the question in the simplest and leanest manner.
This uses vanilla javascript and works on all main-stream proper browsers.
I am a bit surprised that nobody seems to know that you're perfectly allowed to do:
<label>Put your stuff here: <input value="Stuff"></label>
Which won't get picked up by any of the suggested answers, but will label the input correctly.
Here's some code that does take this case into account:
$.fn.getLabels = function() {
return this.map(function() {
var labels = $(this).parents('label');
if (this.id) {
labels.add('label[for="' + this.id + '"]');
}
return labels.get();
});
};
Usage:
$('#myfancyinput').getLabels();
Some notes:
The code was written for clarity, not for performance. More performant alternatives may be available.
This code supports getting the labels of multiple items in one go. If that's not what you want, adapt as necessary.
This still doesn't take care of things like aria-labelledby if you were to use that (left as an exercise to the reader).
Using multiple labels is a tricky business when it comes to support in different user agents and assistive technologies, so test well and use at your own risk, etc. etc.
Yes, you could also implement this without using jQuery. :-)
Earlier...
var labels = document.getElementsByTagName("LABEL"),
lookup = {},
i, label;
for (i = 0; i < labels.length; i++) {
label = labels[i];
if (document.getElementById(label.htmlFor)) {
lookup[label.htmlFor] = label;
}
}
Later...
var myLabel = lookup[myInput.id];
Snarky comment: Yes, you can also do it with JQuery. :-)
All the other answers are extremely outdated!!
All you have to do is:
input.labels
HTML5 has been supported by all of the major browsers for many years already. There is absolutely no reason that you should have to make this from scratch on your own or polyfill it! Literally just use input.labels and it solves all of your problems.
with jquery you could do something like
var nameOfLabel = someInput.attr('id');
var label = $("label[for='" + nameOfLabel + "']");
If you're willing to use querySelector (and you can, even down to IE9 and sometimes IE8!), another method becomes viable.
If your form field has an ID, and you use the label's for attribute, this becomes pretty simple in modern JavaScript:
var form = document.querySelector('.sample-form');
var formFields = form.querySelectorAll('.form-field');
[].forEach.call(formFields, function (formField) {
var inputId = formField.id;
var label = form.querySelector('label[for=' + inputId + ']');
console.log(label.textContent);
});
Some have noted about multiple labels; if they all use the same value for the for attribute, just use querySelectorAll instead of querySelector and loop through to get everything you need.
Solution One <label>: One <input>
Using HTML 5.2 reference
Considering the <label> pointing to <input> using for=, the labels element will be a non empty array, and act as a link to the <label> element, accessing all properties of it, including its id=.
function myFunction() {
document.getElementById("p1").innerHTML = "The first label associated with input: <b>" + document.getElementById("input4").labels[0].id + "</b>";
}
<form>
<label id="theLabel" for="input4">my id is "theLabel"</label>
<input name="name1" id="input4" value="my id is input4">
<br>
</form>
<p>Click the "click me" button to see the label properties</p>
<button onclick="myFunction()">click me</button>
<p id="p1"></p>
Solution Many <label>: One <input>
With more than one <label> using for=, you can make a loop to show all of them, like this:
function myFunction2() {
var x = document.getElementById("input7").labels;
let text = "";
for (let i = 0; i < x.length; i++) {
text += x[i].id + "<br>";
}
document.getElementById("p7").innerHTML = text;
}
<b>Three labels for one input</b><br>
<br>
<form>
<label id="theLabel2" for="input7">my id is "theLabel2</label><br>
<label id="theLabel3" for="input7">my id is "theLabel3</label><br>
<label id="theLabel4" for="input7">my id is "theLabel4</label><br>
<input name="name1" id="input7" value="my id is input7">
<br>
</form>
<p>Click the "click me" button to see the label properties</p>
<button onclick="myFunction2()">click me2</button>
<p id="p7"></p>
$("label[for='inputId']").text()
This helped me to get the label of an input element using its ID.
Answer from Gijs was most valuable for me, but unfortunately the extension does not work.
Here's a rewritten extension that works, it may help someone:
jQuery.fn.getLabels = function () {
return this.map(function () {
var parentLabels = $(this).parents('label').get();
var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
return parentLabels.concat(associatedLabels);
});
};
A really concise solution using ES6 features like destructuring and implicit returns to turn it into a handy one liner would be:
const getLabels = ({ labels, id }) => labels || document.querySelectorAll(`label[for=${id}]`)
Or to simply get one label, not a NodeList:
const getFirstLabel = ({ labels, id }) => labels && labels[0] || document.querySelector(`label[for=${id}]`)
It is actually far easier to add an id to the label in the form itself, for example:
<label for="firstName" id="firstNameLabel">FirstName:</label>
<input type="text" id="firstName" name="firstName" class="input_Field"
pattern="^[a-zA-Z\s\-]{2,25}$" maxlength="25"
title="Alphabetic, Space, Dash Only, 2-25 Characters Long"
autocomplete="on" required
/>
Then, you can simply use something like this:
if (myvariableforpagelang == 'es') {
// set field label to spanish
document.getElementById("firstNameLabel").innerHTML = "Primer Nombre:";
// set field tooltip (title to spanish
document.getElementById("firstName").title = "Alfabética, espacio, guión Sólo, 2-25 caracteres de longitud";
}
The javascript does have to be in a body onload function to work.
Just a thought, works beautifully for me.
As it has been already mentionned, the (currently) top-rated answer does not take into account the possibility to embed an input inside a label.
Since nobody has posted a JQuery-free answer, here is mine :
var labels = form.getElementsByTagName ('label');
var input_label = {};
for (var i = 0 ; i != labels.length ; i++)
{
var label = labels[i];
var input = label.htmlFor
? document.getElementById(label.htmlFor)
: label.getElementsByTagName('input')[0];
input_label[input.outerHTML] =
(label.innerText || label.textContent); // innerText for IE8-
}
In this example, for the sake of simplicity, the lookup table is directly indexed by the input HTML elements. This is hardly efficient and you can adapt it however you like.
You can use a form as base element, or the whole document if you want to get labels for multiple forms at once.
No checks are made for incorrect HTML (multiple or missing inputs inside labels, missing input with corresponding htmlFor id, etc), but feel free to add them.
You might want to trim the label texts, since trailing spaces are often present when the input is embedded in the label.
The best answer works perfectly fine but in most cases, it is overkill and inefficient to loop through all the label elements.
Here is an efficent function to get the label that goes with the input element:
function getLabelForInput(id)
{
var el = document.getElementById(id);
if (!el)
return null;
var elPrev = el.previousElementSibling;
var elNext = el.nextElementSibling;
while (elPrev || elNext)
{
if (elPrev)
{
if (elPrev.htmlFor === id)
return elPrev;
elPrev = elPrev.previousElementSibling;
}
if (elNext)
{
if (elNext.htmlFor === id)
return elNext;
elNext = elNext.nextElementSibling;
}
}
return null;
}
For me, this one line of code was sufficient:
el = document.getElementById(id).previousElementSibling;
In most cases, the label will be very close or next to the input, which means the loop in the above function only needs to iterate a very small number of times.
Use a JQuery selector:
$("label[for="+inputElement.id+"]")
For future searchers... The following is a jQuery-ified version of FlySwat's accepted answer:
var labels = $("label");
for (var i = 0; i < labels.length; i++) {
var fieldId = labels[i].htmlFor;
if (fieldId != "") {
var elem = $("#" + fieldId);
if (elem.length != 0) {
elem.data("label", $(labels[i]));
}
}
}
Using:
$("#myFormElemId").data("label").css("border","3px solid red");
I know this is old, but I had trouble with some solutions and pieced this together. I have tested this on Windows (Chrome, Firefox and MSIE) and OS X (Chrome and Safari) and believe this is the simplest solution. It works with these three style of attaching a label.
<label><input type="checkbox" class="c123" id="cb1" name="item1">item1</label>
<input type="checkbox" class="c123" id="cb2" name="item2">item2</input>
<input type="checkbox" class="c123" id="cb3" name="item3"><label for="cb3">item3</label>
Using jQuery:
$(".c123").click(function() {
$cb = $(this);
$lb = $(this).parent();
alert( $cb.attr('id') + ' = ' + $lb.text() );
});
My JSFiddle: http://jsfiddle.net/pnosko/6PQCw/
I have made for my own need, can be useful for somebody: JSFIDDLE
$("input").each(function () {
if ($.trim($(this).prev('label').text()) != "") {
console.log("\nprev>children:");
console.log($.trim($(this).prev('label').text()));
} else {
if ($.trim($(this).parent('label').text()) != "") {
console.log("\nparent>children:");
console.log($.trim($(this).parent('label').text()));
} else {
if ($.trim($(this).parent().prev('label').text()) != "") {
console.log("\nparent>prev>children:");
console.log($.trim($(this).parent().prev('label').text()));
} else {
console.log("NOTFOUND! So set your own condition now");
}
}
}
});
I am bit surprised no one is suggesting to use the CSS relationship method?
in a style sheet you can reference a label from the element selector:
<style>
//for input element with class 'YYY'
input.YYY + label {}
</style>
if the checkbox has an id of 'XXX'
then the label would be found through jQuery by:
$('#XXX + label');
You can also apply .find('+ label') to return the label from a jQuery checkbox element, ie useful when looping:
$('input[type=checkbox]').each( function(){
$(this).find('+ label');
});
If you use the for attribute, you can use querySelector(...) to get
the associated label.
HTML/JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<label for="myCheckbox">Log Report to Console?</label>
<input name="myCheckbox" type="checkbox" oninput="doSomething(event)" />
<script type="text/javascript">
function doSomething(e) {
const query = `label[for="${e.target.name}"]`; // This is string interpolation NOT JQuery
const label = document.querySelector(query);
}
</script>
</body>
</html>
Plain JavaScript
function doSomething(e) {
// const query = `label[for="${e.target.name}"]`; // This is string interpolation NOT JQuery
// Maybe it is safer to use ".getAttribute"
const query = `label[for="${e.target.getAttribute("name")}"]`;
const label = document.querySelector(query);
// Do what you want with the label here...
debugger; // You're welcome
console.log(label);
}

Categories