breaking line after second line

Question

Javascript:

    $(document).ready(function () {
    $(".addTag").click(function () {
        $('.questao').html($('.questao').html() + '&nbsp;<span contentEditable="false" class="tagResp">&nbsp;</span>&nbsp;');
        $('.questao').focus();
    });
    });

Span Css:

border:2px solid #dadada;
border-color:#9ecaed;
border-radius:7px;
display: inline-block;
height: 10px;
width: 50px;
padding:5px;
margin-top:3px; 
box-shadow:0 0 10px #9ecaed;
white-space:nowrap;

This example should create a tag in the current line when the user clicks the button.

Problem: After the secound line, the Tag the jquery create for some reason jumps to a new line, instead of staying in the same line.

Example:

~WRONG~

 randomtext randomtext <span>tag</span> <br>
 randomtext <br>
 <span>tag</span>

Should be:

 randomtext randomtext <span>tag</span> <br>
 randomtext <span>tag</span>

The other question is:

Its possible to focus the last line ? the jquery function .focus() goes to the start of the text, should be the end.

Thanks! I hope someone can help me.

Inspect the html of the fiddle you posted. After you hit enter and type some more, it puts that new text in a div. Since the div is a block element, it pushes the new span down to the next line. I don't know what the solution is though, unfortunately. — Jason P, Jun 06 '13 at 13:33
why not use appendTo instead of rewriting html? is it doable in content editable areas? not sure, just a thought — Ayyash, Jun 06 '13 at 14:26
tried this on FF and it works, but im not sure if it validates as an answer http://jsfiddle.net/MuHvy/11/ — Ayyash, Jun 06 '13 at 14:31

Bloafer · Accepted Answer · 2013-06-06T14:28:14.570

3

It looks like there is an issue with the implementation of contentEditable in HTML5

By looking at this link http://jsfiddle.net/MuHvy/10/ you can click the test button and it reports exactly what you expect, add a little text to the box and then click the test button again, you will see because the box has lost focus the Browser adds the extra   tag.

There are no details that I can find http://www.w3.org/TR/2008/WD-html5-20080610/editing.html about the implementation of focus lost

However you can pre-empt the post fixed   tag by writing a function to trim the trailing   before adding the next element, however this may be different across browsers

edited Jun 06 '13 at 14:28

answered Jun 06 '13 at 13:54

Bloafer

1,324
7
12

Thanks for the answer, i just tested and the span still breaks a line: http://i.imgur.com/hDeBiy4.png?1 – Kauê Gimenes Jun 06 '13 at 13:58
Had a play with the code and have edited my answer to explain – Bloafer Jun 06 '13 at 14:28
1

As full closure to the question please accept http://jsfiddle.net/MuHvy/12/ as the answer ;) – Bloafer Jun 06 '13 at 14:37
Well done Bloafer, i was able to fix also using $('br[type="_moz"]').remove(); ! but i will accept your answer. – Kauê Gimenes Jun 06 '13 at 16:17
you method has a problem, if the user wants to start a line with tag the js will remove the new line. using the $('br[type="_moz"]').remove(); its possible to do that. – Kauê Gimenes Jun 06 '13 at 16:21
The problem with `$('br[type="_moz"]').remove();` is that the `br` may not always be set by the browser for example it could be a `br[type="_whatever"]` tag. It could be possible to remove only the generated `br` but all the `br`s are generated by the browser. Perhaps give the user another button to place a `span` on a new line? – Bloafer Jun 07 '13 at 12:07

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

So as Jason P, was looking at your HTML, I was looking at it too. I hope this is what you want. I added a display : inline in your css to any div inside your contentEditable field. So, even after you press enter and a div element is created, the element will be inline.

Updated fiddle : http://jsfiddle.net/MuHvy/4/ (Tested on chrome 23 and IE10)

Similarly for FF and safari, you might want to replace the   with '' and then add the span when the click happens.

For IE9 :the div itself looks weird in it so let's just ignore that.

For the focus problem, look at this question : jquery Setting cursor position in contenteditable div. This is exactly what you need. Hope this helps!

edited May 23 '17 at 11:53

Community

1
1

answered Jun 06 '13 at 13:47

krishwader

11,341
1
34
51

Please, try reproduce: write some random text and press the button, the span will jump to the next line. – Kauê Gimenes Jun 06 '13 at 13:50
I was able to fix the first problem, but the cursor position one i cant implement, i guess its not compatible with div just textarea. – Kauê Gimenes Jun 06 '13 at 14:21
Nice :-) check this new updated link in the question. Its specifically meant for `contentEditable`s. And please search for all `br` **inside** `div[contentEditable =true]`. Don't just go blindly removing all the `br`s in your code. This will effectively remove all the br tags in your code which is not what you want. – krishwader Jun 06 '13 at 14:25

score 0 · Answer 3 · edited May 23 '17 at 11:53

0

You are going to have to do some postprocessing to fix it. HTML is not sensitive to whitespace, so from the perspective of an HTML document (and jQuery writing to an HTML document), this:

randomtext randomtext <span>tag</span>
randomtext
<span>tag</span>

And this:

randomtext randomtext <span>tag</span>
randomtext <span>tag</span>

Are functionally identical. If you are really sensitive to whitespace, you might want to consider using text() instead of html(), and writing to a textarea instead of a div or whatever you're using.

For your final question, the answer you seek can be found here: jQuery Set Cursor Position in Text Area

Edit:

After @Gorfl added that the newline is actually a linebreak, I did some more checking. Seems that the problem is due to the way contentEditable is being handled by the browser. In firefox, every line is terminated with a   - whether or not you hit enter. In chrome, each line gets wrapped in a div. If you want a reliable cross-browser solution, I think you are going to have to not use contentEditable. Instead, just attach a listener for keydown or keypress events, and have it copy the key pressed to the div body. That way you get complete control over how it is displayed.

edited May 23 '17 at 11:53

Community

1
1

answered Jun 06 '13 at 13:28

Benubird

18,551
27
90
141

The first example creates a
then for some reason, thats the problem. – Kauê Gimenes Jun 06 '13 at 13:30
@Gorfl Ah, that makes sense now. You didn't say anything about a
- your code example just has a newline – Benubird Jun 06 '13 at 13:46
Maybe use `textarea` ? Best Cross browser solution! :-) – krishwader Jun 06 '13 at 14:00
I need to add the span element. I guess textarea dont allow this. – Kauê Gimenes Jun 06 '13 at 14:01
Best way to take this all out would be to write a replace function to which replaces all instances of `
` to just `''`, check for all the other browsers' compatibility and fix it one by one. – krishwader Jun 06 '13 at 14:06
@Benubird Without the contentEditable the page dont accept edit in the div, i need a editable textbox with accept custom elements inside like span. – Kauê Gimenes Jun 06 '13 at 14:11
@Gorfi You can make it editable using javascript instead of the browser editable function. There are various plugins that already do this, but it's also not that hard to do it yourself. You just need to listed for keyevents, detect focus, and track the cursor position. Or you can process the contents of the div before adding the span, to handle each browsers case individually. – Benubird Jun 06 '13 at 14:24

score 0 · Answer 4 · answered Jun 06 '13 at 14:18

I was able to fix the break line problem using

   $('br[type="_moz"]').remove();

For some reason the div creates a br with type _moz at the end everytime.

Jquery:

 $(document).ready(function () {
    $(".addTag").click(function () {
        $('br[type="_moz"]').remove();
        $('.questao').html($('.questao').html() + '&nbsp;<span contentEditable="false" class="tagResp">&nbsp;</span>&nbsp;');
        $('.questao').focus();
    });
});

breaking line after second line

4 Answers4