1
I have a DIV
which is editable by the user, only that I wanted when ee write Brasil
it stays only this word green tabem as EUA
turns red, but only certain words.
Code of the IVD:
<div id="texto" contenteditable = "true" ></ div>
1
I have a DIV
which is editable by the user, only that I wanted when ee write Brasil
it stays only this word green tabem as EUA
turns red, but only certain words.
Code of the IVD:
<div id="texto" contenteditable = "true" ></ div>
1
You can take the keyup event and search the text if there is an occurrence of the word, existing this word in the text just replace it by replacing it, as the name says, and add some tag to include your style.
You can improve it in many ways, but on the basis you could accomplish something like:
HTML:
<div id="text" contenteditable="true">O </ div>
JS:
var text = document.getElementById('text');
text.onkeyup = function(evt) {
var counter = this.textContent.split(/(Brasil)/i).length;
if (counter > 1 && (!this.lastCount || this.lastCount < counter) ) {
this.lastCount = counter;
this.innerHTML = this.textContent.replace(/(Brasil)/g, "<b class='green'>Brasil</b> ");
var range = document.createRange();
var sel = window.getSelection();
var lastNode = text.childNodes.item(text.childNodes.length -1)
range.setStart(lastNode, 1);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
};
CSS:
.green{
color:green;
}
See working on jsfiddle
1
As I mentioned in the comment, I don’t know what event you would use to call the function. But finding, an option is: when saving text, use replace with regular expression to insert span elements around the words, with the corresponding Styles.
var palavrasCores = {Brasil: "green", EUA: "red"};
var resultado = textoObtido.replace(/Brasil|EUA/gi, function(palavra){
return '<span style="color: ' + palavrasCores[palavra] + '">' + palavra + '</span>';
});
0
function checkKey() {
var plaintext = document.getElementById("textbox");
if(plaintext.value == 'EUA') {
plaintext.style.color = "#FF0000";
}
if(plaintext.value == 'BRASIL') {
plaintext.style.color = "#66CD00";
}
if(plaintext.value != 'EUA' && plaintext.value != 'BRASIL') {
plaintext.style.color = "#000000";
}
}
</script>
<input type="text" id="textbox" name="plaintext" onKeyUp="checkKey()">
Browser other questions tagged javascript html css div
You are not signed in. Login or sign up in order to post.
How does the user edit the div? The text is loaded into a text box and then saved by a button?
– Vinícius Bastos
You could put the code you’re using?
– David
You can create a CSS class and when it is brazil call the class . green if it is united states to class . red
– Daniel Saraiva
@Viníciusbastos is not saved yet, and he ends up editing by the tag contenteditable = "true"
– Daniel
@Danielsaraiva as well could give + details or even an example?
– Daniel
@Daniel, I couldn’t find a change event using this attribute. (the most I could find was this link ). I can help in a function to convert the text, but I don’t know when this function could be called because I don’t know events for this property (if they exist).
– Vinícius Bastos
@Daniel run the code below and see if you understand
– Daniel Saraiva
In time, it is not necessary to assign the value
true
property. Only the occurrence ofcontentEditable
already enables editing in the element.– Afonso