It just confuse me.
As the code below shows, when you press "ctrl + b" in div, the font weight turn bolder, while, it won't happen in textarea.
This question is based on comments in Marcus Ekwall's answer to Rendering HTML inside textarea. But I can't add a comment, so I ask here.
div, textarea {
width: 100px;
height: 100px;
border: 1px solid;
padding: 5px;
}
textarea {
resize: none;
}
<div contentEditable="true"></div>
<textarea contentEditable="true" placeholder="textarea"></textarea>
in textarea doesn't work because It can not support HTML tags
when it run document.execCommand("bold") add <b>fdsfsdfds</b> in selected text
Here you are an example using jQuery (updated)
$("#editor").keypress("c",function(e){
if(e.ctrlKey) {
document.execCommand('bold', false, null);
}
})
#editor {
width: 200px;
height: 200px;
border: 1px solid;
padding: 5px;
resize: none;
border: 1px solid black;
word-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="editor" contentEditable="true"></div>
please see this post about keypress jquery: keypress, ctrl+c (or some combo like that)
more examples about document.execCommand http://codepen.io/netsi1964/pen/QbLLGW http://codepen.io/netsi1964/pen/QbLLGW
The behavior is just browser specific. Different browsers have different behaviors. And thanks to adeneo's mention: In a textarea, one can't add anything other than plain text.
Related
I have a contenteditable div with spellcheck set to false. I have a button that when clicked, changes the spellcheck attribute to true, but the spellcheck won't kick in until I click inside the div. I have tried triggering events for click, focus, blur, change etc. on the div, and nothing causes the red lines to appear. This is in old jQuery 1.8 (legacy app). is there a trick to this?
$('.spellcheck').live('click', function() {
$('#editor').attr('spellcheck', true);
$('#editor').click();
$('#editor').focus();
$('#editor').blur();
$('#editor').change();
});
I have also wrapped the events in a 1 second setTimeout to get past any asynchronous race conditions, but no luck.
HTML Part:
<div id="editor" class="editor" contenteditable spellcheck="false"></div>
<button class="spellcheck">Check Spelling</button>
this isn't really a problem of contenteditable, it happens on a normal div as well.
Click the button, it adds the spellcheck attribute and then sets focus to the #editor div. Spellcheck is active and underlining misspelled words.
Here it is in jQuery 1.8.1:
$('.spellcheck').click( function () {
$('#editor').attr('spellcheck', true);
$('#editor').focus();
});
#editor {
width: 200px;
height: 100px;
border: 1px solid #e0e0e0;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="editor" contenteditable spellcheck="false">
somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>
Here's the same code in a different snippet, this one running jQuery 1.2.3:
$('.spellcheck').click( function () {
$('#editor').attr('spellcheck', true);
$('#editor').focus();
});
#editor {
width: 200px;
height: 100px;
border: 1px solid #e0e0e0;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="editor" contenteditable spellcheck="false">
somme mispellled wordds
</div>
<button class="spellcheck">Check Spelling</button>
I been looking all over on google and I cant seem to find a working solution for this situation. I basically want to use a div call trigger to successfully execute document.execCommand(); but I notice that document.execCommand() don't work with a
div as a event listener and I know this works with a button tag but I don't want to use a button with this so how can I get this working with a div and I know one of you guys will say, you know you don't need to use document.execCommand to do something like this
and I am aware of that but for personal reasons I need to do this with a div with document.execCommand.
My code
document.querySelector('#trigger').addEventListener('click',underline);
function underline(){
document.execCommand('underline', false, '');
}
#trigger{
background-color: red;
height: 50px;
width: 100px;
color: white;
position: relative;
border-radius: 8px;
cursor: pointer;
display: block;
}
<div id='trigger'></div><!--</trigger>-->
<p>Text highlight the word Adam and press the red trigger to add a underline to Adam.</p>
<p contenteditable='true'>Adam</p>
This code should make it work try this out.
document.querySelector("#trigger").addEventListener('mousedown',function(event){event.preventDefault();});
document.querySelector('#trigger').addEventListener('click',underline);
function underline(){
document.execCommand('underline', false, '');
}
#trigger{
background-color: red;
height: 50px;
width: 100px;
color: white;
position: relative;
border-radius: 8px;
cursor: pointer;
display: block;
}
<div id='trigger'></div><!--</trigger>-->
<p>Text highlight the word Adam and press the red trigger to add a underline to Adam.</p>
<p contenteditable='true'>Adam</p>
I took ideas from this post and I converted this method into a event listener version for your situation.
So I'm making this flash card app, and I'm using Angular to let the user enter text in an input text box and the text displays on a flash card below it. The problem is that when the user types a lot, the text overflows moves past and outside the div box. Here is my code.
<input type="text" ng-model="ctrl.note">
<div class="box">
<div class="note">{{ctrl.note}}</div>
</div>
</div>
CSS:
.box {
border: solid;
height: 300px;
width: 600px;
margin: 30px auto;
border-radius: 25px;
box-shadow: 8px 8px 10px #ccc;
}
.note {
text-align: center;
margin: 50px;
font-weight: bold;
font-size: 40px;
}
The input type="text" box is meant for single line text.
To get what you are looking for you need to use a <textarea> HTML tag.
HTML textarea tag
You could write:
<textarea col="20" rows="5" ng-model="ctrl.note"></textarea>
As advised by Ted A.
Set a width in the .note CSS class so that your browser knows what "outside the box" means.
Also consider the word-wrap property
I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");
I am working on this: http://jsfiddle.net/ms2fV/
As you type in the first div, the second div writes the same thing but with colors.
If you do just one line, it works. But if you add a newline, it starts getting weird, because some div are added...
How can I make it work with multiple lines?
Thanks!
Edit: it works correctly on firefox, but not on chrome nor safari on my mac...
I checked your problem, and can be sorted out by changing css like this.
#entry {
width: 300px;
height: 100px;
border: 1px solid black;
margin-top: 5px;
padding:5px;
}
#display {
width: 300px;
height: 100px;
border: 1px solid black;
margin-top: 5px;
padding:5px;
}