In order to make a textarea handle some basic formatting, I put a div over it with the same monospace font and position. The div would display the same text, but with color and boldness.
However, the text inside the div obstructs and makes the user unable to select text inside the textarea.
<div class="centerc">
<div class="copyc">
<textarea id="input" class="ipadded epadded txtarea" rows=20 cols=80></textarea>
<div id="copyadd" class="copyadd"></div>
<!--THIS IS THE DIV FOR FORMATTING ^ -->
</div>
</div>
-webkit-user-select: none;-ms-user-select:none;user-select:none; etc has not fixed this issue, only made the user unable to select text in the div as well. If any more CSS code is needed, I will comment it but I don't think this is necessary.
How would I stop the div from making the user unable to select text from the textarea (if this is possible)?
If not, are there any alternatives to the method I use?
Edit: I should have made it clear from the start I wanted multiple types of formatting.
You can't put formatting in a textarea but you can use an editable div and get rid of the textarea. It will at least make the problem simpler.
See this question: editable div
In order to expand capacity of being stylized of a <textarea> a good starting point is thinking at the opposite: making a <div> editable...
<div id='divTextEditable' contenteditable></div>
That's not "the magic wand", and it has its downside, but it's a good starting point.
Why don't you just add some css to the textarea to accomplish what the div is trying to accomplish.
.dark-text {
font-weight: bold;
font-color: black;
}
You could, for instance, add a CSS rule that puts the text area in front of the div when the user is hovering over the parent div, something like this:
.copyc:hover txtarea {
z-index: 2;
}
Related
So I'm creating something like an online text editor. After going through some bugs, I just noticed that if I try to do something like justify some text in the center, it creates a div with text-align: center as it should. However, it also ends up creating a span with font and weight properties which I do not want since the font will be set by the user in a parent element and since the text is in a span with its own font and weight properties, it never gets applied.
So before I click the center button it'd look something like
<div contenteditable="true">Write your text here!</div>
And after
<div contenteditable="true">
<div style="text-align: center;">
<span style="font-size: 1rem; font-weight: 400;">Write your text here!</span>
</div>
</div>
When I want it to just be
<div contenteditable="true">
<div style="text-align: center;">
Write your text here!
</div>
</div>
I took two pictures of before and after I use execCommand("justifyCenter") it on the element if you'd rather see the actual example.
Before
After
Any suggestions on how I can make it so that either the parent elements font weight and size properties will be applied to the text rather than its own properties, or how to stop it from creating those properties in the first place.
Thanks!
Well I seem to have figured it out. For some reason since the parent contenteditable="true" didn't have it's font-size and font-weight set, it created that extra span. So I added those style attributes to the parent div and it stopped creating it. Hope this helps if someone ever comes across this problem again :)
Inserting HTML with the a div wrapped around the selection worked for me. You will need to style the div for your justification type.
document.execCommand("insertHTML", false, "<div style='text-align: center;'>"+ document.getSelection()+"</div>");
I have this highlighted span in which you can type text
jsfiddle
You can click on the white area and start typing. Now when you type and you reach the and I would like it to wrap.
The HTML is not very special:
<div>
Complete the story:<br>
Once upon a time there was <span></span>. And they all die :)
</div>
<input>
To make the typing possible I use a hidden (not hidden in the demo) input field. Anyway, now when you start typing and you reach the end of the line it should wrap as follows:
I've tried things like word-wrap:break-word; but that didn't work very well. Is something like this even possible ?
You can't wrap text in an input. You could use a textarea instead. You will have to adjust your CSS for the size of the span to grow as the text spans multiple lines, by changing the height to min-height:
min-height: 20px;
See this fiddle for working version: https://jsfiddle.net/3L4bazg6/7/
I've also removed some of the styling in your span rule to get the wrap effect you are looking for.
Here's another fiddle that hides the textarea completely: https://jsfiddle.net/3L4bazg6/10/
And, here's a fiddle that does away with the textarea and the JavaScript completely and just uses contenteditable:" https://jsfiddle.net/3L4bazg6/17/
Refering to your js fiddle
Change display: inline-flex; to display: inline;
Remove height: 20px;
Add line-height
here is your updated JSfiddle
https://jsfiddle.net/sewpjeta/9/
Well Im stucked at this point.please take a look at this http://jsfiddle.net/karthik64/5jhgF/3/
Okay first enter some input into the input box and hit enter you would see a span element added to the div and try to input some more values and
I guess you got what the problem is.Could anyone tell me how do i fit those <span> tags in <div> tag in a nice manner.
I have set my div tag width and using javscript I add some elements to div tag and I get some kind of wierd bugs something like for example . if user enters dennis ritchie , steve jobs and bill gates my code works likes this
..dennis ritchie.. ..steve jobs.. ..bil
l gates..
Instead it should be like this
..dennis ritchie.. ..steve jobs..
..bill gates..
if it cannot fit the span tag in that remaining space, I want the whole span tag element jump to next line instead of breaking the span tag value how do i do that .please help me with this.any help is greatly appreciated.Thanks
<span>s are not block-level elements and are not rendered like you describe by default (they wrap with text). Apply the CSS display: inline-block; to your spans to stop them from wrapping.
On newer browsers, add display: inline-block; to the .music_elements style rule.
On older browsers, float: left; might work.
I'm total noob with CSS and it looks like hell =/
I have absolute positioned DIV and I handle mouse events over this DIV with JS like this:
<div style='position: absolute; left: 0px; width:50px; height: 50px;'
onmouseover='this.style.border="2px solid red"'
onmouseout='this.style.border="1px solid black"'>
</div>
<div style='position: absolute;'>SOME TEXT</div>
I need to place some text over this DIV and over the few same DIVs, but if I place any element over this DIV onMouseOut event is firing when mouse cursor switch to text. Tag with text can't be inside the DIV. Playing with z-index didn`t help. My browser is IE8.
UPDATE:
I can't place text into the div because text must go beyond bounds of DIV. In other words I want handle mouse events over arbitrary area in any text. I can do this if I set backgroundColor of DIV, but I need handle events of transparent area.
tried {cursor: pointer} on the text div?
If you're trying to do this purely with mouseover events, then the only way to achieve what you're after is to place the second div inside of the first.
On the other hand, if you want to dive into some scripting, here's a basic algorithm for how you can handle this:
Set up a function to fire when you mouseover the trigger divs. This function will show the "SOME TEXT" div, if its display is set to "none".
Set up a function to fire when you mouseout of the trigger divs. This function will be a little more complex. First you have to check to see what the event.currentTarget is; if event.currentTarget is the "SOME TEXT" div, return false. If it's anything else, then you set the display of "SOME TEXT" to "none".
This might be a little beyond where you are with CSS and JS, but it's pretty much the only way to get it done, since CSS alone won't do what you need.
is it possible to make a section within a contenteditable element permanent, so that a user cannot remove it?
I have an h2 tag in a contentEditable div. I don't want the user to edit the h2 tag, so I set contentEditable=false, but the user can still select and remove it, which I want to disallow.
So, for ex:
<div contentEditable="true">
<h2 contentEditable="false">My h2 tag</h2>
This is a div you can edit. But you can't edit or remove the h2 tag.
</div>
Nope, sorry, it's all-or-nothin'.
A work-around would be to grab the H2 tag and reinsert it after the edit is complete, using JavaScript.
Why not use position:absolute to move it above the div (maybe using a proper z-index) without being inside it (in the source)?
Remember to add some padding to your div in the space allocated for your h2.