creating a line break after the second sentence

Question

creating a line break after the second sentence

Link to 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 code snippet is designed to create a tag on the same line when a button is clicked.

Issue: The created tag by jQuery jumps to a new line after the second line, instead of staying in the same line.

Example:

~INCORRECT~

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

Should look like this:

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

Another question is:

Is it possible to focus on the last line? The .focus() function in jQuery goes to the start of the text, but ideally should go to the end.

Appreciate any help or suggestions!

javascript jquery html css

Answer 1

Answer №1

It appears that there may be a problem with how contentEditable is implemented in HTML5

If you visit this link http://jsfiddle.net/MuHvy/10/ and click the test button, you will notice that when you add text to the box and then click the test button again, an extra   tag is added due to the box losing focus.

I couldn't find any specific information about the handling of focus loss in http://www.w3.org/TR/2008/WD-html5-20080610/editing.html

One potential workaround is to create a function that removes trailing   tags before adding the next element, although this solution may vary depending on the browser being used

Answer 2

It appears that there may be a problem with how contentEditable is implemented in HTML5

If you visit this link http://jsfiddle.net/MuHvy/10/ and click the test button, you will notice that when you add text to the box and then click the test button again, an extra   tag is added due to the box losing focus.

I couldn't find any specific information about the handling of focus loss in http://www.w3.org/TR/2008/WD-html5-20080610/editing.html

One potential workaround is to create a function that removes trailing   tags before adding the next element, although this solution may vary depending on the browser being used

Answer 3

Answer №2

While Jason P was examining your HTML, I took a look as well. I hope this adjustment meets your requirements. I included a display : inline in your CSS for any div within your contentEditable area. This ensures that even after pressing enter and creating a new div element, it will remain inline.

Check out the updated fiddle here: http://jsfiddle.net/MuHvy/4/ (Successfully tested on Chrome 23 and IE10)

Similarly, for Firefox and Safari, you may consider replacing the   with '' and then inserting a span when a click event occurs.

In regard to IE9, the appearance of the div itself might be unconventional, so we can disregard that issue.

If the focus presents an problem, take a look at the following question: jQuery Setting cursor position in contenteditable div. This resource provides what you're looking for. I hope this information proves beneficial!

Answer 4

While Jason P was examining your HTML, I took a look as well. I hope this adjustment meets your requirements. I included a display : inline in your CSS for any div within your contentEditable area. This ensures that even after pressing enter and creating a new div element, it will remain inline.

Check out the updated fiddle here: http://jsfiddle.net/MuHvy/4/ (Successfully tested on Chrome 23 and IE10)

Similarly, for Firefox and Safari, you may consider replacing the   with '' and then inserting a span when a click event occurs.

In regard to IE9, the appearance of the div itself might be unconventional, so we can disregard that issue.

If the focus presents an problem, take a look at the following question: jQuery Setting cursor position in contenteditable div. This resource provides what you're looking for. I hope this information proves beneficial!

Answer 5

Answer №3

If you want to resolve the issue, some postprocessing will be necessary. HTML does not pay attention to whitespace, so in the eyes of an HTML document (and jQuery when writing to one), the following code snippets are essentially the same:

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

And this:

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

They perform the same functionally. If you are particular about whitespace, consider using text() over html(), and writing to a textarea instead of a div.

As for your last query, the solution can be located here: jQuery Set Cursor Position in Text Area

Edit:

Following @Gorfl's mention that the newline is actually a linebreak, I conducted further investigation. It appears that the issue stems from how browsers handle contentEditable. In Firefox, each line ends with a  , regardless of hitting enter or not. On the other hand, Chrome wraps every line in a div. To ensure a consistent solution across different browsers, it might be best to avoid using contentEditable altogether. Instead, attach a listener for keydown or keypress events, and have it replicate the keystrokes in the div body for full control of display.

Answer 6

If you want to resolve the issue, some postprocessing will be necessary. HTML does not pay attention to whitespace, so in the eyes of an HTML document (and jQuery when writing to one), the following code snippets are essentially the same:

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

And this:

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

They perform the same functionally. If you are particular about whitespace, consider using text() over html(), and writing to a textarea instead of a div.

As for your last query, the solution can be located here: jQuery Set Cursor Position in Text Area

Edit:

Following @Gorfl's mention that the newline is actually a linebreak, I conducted further investigation. It appears that the issue stems from how browsers handle contentEditable. In Firefox, each line ends with a  , regardless of hitting enter or not. On the other hand, Chrome wraps every line in a div. To ensure a consistent solution across different browsers, it might be best to avoid using contentEditable altogether. Instead, attach a listener for keydown or keypress events, and have it replicate the keystrokes in the div body for full control of display.

Answer 7

Answer №4

The issue with the extra break line was resolved by using this solution:

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

It seems that the div was adding a br element with type _moz at the end every time.

Here is the Jquery code snippet that fixed the problem:

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

Answer 8

The issue with the extra break line was resolved by using this solution:

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

It seems that the div was adding a br element with type _moz at the end every time.

Here is the Jquery code snippet that fixed the problem:

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

<span> creating a line break after the second sentence

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporating date formatting to the existing documents

Save the contents of a file within an HTML table using jQuery

I am having trouble with the browser detection not accurately identifying the browser I am currently using

Issue with array filter not functioning correctly upon page refresh when utilizing vue-router

The iPad Overlay fails to fully extend across the screen

Is there a way to delete cookies upon browser closure, but retain them while moving between pages?

The length parameter for geometry.vertices in Three.js is not defined

Is it possible to use two onChange functions in a single text field with ReactJS?

How is it possible to receive a TRUE value when the API returns an error message indicating that the requested photo does not exist?

What is the best way to line up the two stacked elements with a shared background image to give the appearance of a single cohesive image?

When attempting to call a function from a separate JavaScript file in Vue, the returned value is showing

Encountering a 404 error when attempting to access static files within a directory using Express Js

Spinning an object smoothly in the opposite direction of the OrbitControls camera's y rotation in three.js

What is the best way to create sourcemaps in nextjs?

Steps for swapping a term with a hyperlink

Exploring the JSON data received from PHP script via jQuery AJAX

Converting JavaScript code for Angular: A step-by-step guide

Error: The reference to "google" has not been defined within the context of the Google Maps

Utilize images inputted via an HTML DOM file uploader within p5.js

methods for testing private functions outside of react component