CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kauê Gimenes
Kauê Gimenes

Reputation: 1286

<span> breaking line after second line

Code: http://jsfiddle.net/MuHvy/

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.

Upvotes: 0

Views: 1498

Answers (4)

Bloafer
Bloafer

Reputation: 1326

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 <br> 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 <br> tag by writing a function to trim the trailing <br> before adding the next element, however this may be different across browsers

Upvotes: 3

Kau&#234; Gimenes
Kau&#234; Gimenes

Reputation: 1286

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();
    });
});

Upvotes: 0

krishwader
krishwader

Reputation: 11371

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 <br> 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!

Upvotes: 1

Benubird
Benubird

Reputation: 19487

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 <br> - 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.

Upvotes: 0

Related Questions