Stop contenteditable from inserting a div element when the Enter key is pressed using only JavaScript, and

Question

Stop contenteditable from inserting a div element when the Enter key is pressed using only JavaScript, and

Is there a way to prevent the contenteditable feature from adding a div when Enter key is pressed, using pure JavaScript instead of jQuery?

I found an example that uses jQuery here: http://jsfiddle.net/uff3M/, but I specifically need a solution in plain JavaScript.

I managed to solve my issue. Thank you all for your help!

function enterToBr(e){
    var evt = e || window.event;
    var keyCode = evt.charCode || evt.keyCode;
    if(keyCode==13){
            document.execCommand('insertHTML', false, '<br>');
            return false;
    }
}

div{
    border:1px black solid;
    padding:10px;
}

<div contenteditable="true" id="container" onkeydown="enterToBr()">
When Enter is pressed, it currently creates a new div inside the container. However, I would like it to create a new line break (br element) instead.
</div>

javascript html css

Answer 1

Answer №1

It seems like the missing piece of the puzzle is ensuring that you properly stop the default action of the event - just using return false on its own may not suffice in this scenario.

To address this, you can propagate this return value through the HTML attribute used to attach the handler function,

onkeydown="return enterToBreak()"

Alternatively, you can thwart it by employing the suitable method,

    if(keyCode==13){
            document.execCommand('insertHTML', false, '<br>');
            evt.preventDefault();
    }

Answer 2

It seems like the missing piece of the puzzle is ensuring that you properly stop the default action of the event - just using return false on its own may not suffice in this scenario.

To address this, you can propagate this return value through the HTML attribute used to attach the handler function,

onkeydown="return enterToBreak()"

Alternatively, you can thwart it by employing the suitable method,

    if(keyCode==13){
            document.execCommand('insertHTML', false, '<br>');
            evt.preventDefault();
    }

Answer 3

Answer №2

Another option is to utilize CSS for this task.

Incorporate display: inline-block; into your div element:

div{
    display: inline-block;
}

Answer 4

Another option is to utilize CSS for this task.

Incorporate display: inline-block; into your div element:

div{
    display: inline-block;
}

Answer 5

Answer №3

function convertEnterToBrTag(e){
    var event = e || window.event;
    var keyCodeVal = event.charCode || event.keyCode;
    if(keyCodeVal==13){
            document.execCommand('insertHTML', false, '<br>');
    }
}

div{
    border:1px black solid;
    padding:10px;
display: inline-block;
}

<div contenteditable="true" id="container" onkeydown="convertEnterToBrTag()">
When the Enter key is pressed, a new line break tag is created inside the container, rather than a new div element as currently happening.
</div>

Answer 6

function convertEnterToBrTag(e){
    var event = e || window.event;
    var keyCodeVal = event.charCode || event.keyCode;
    if(keyCodeVal==13){
            document.execCommand('insertHTML', false, '<br>');
    }
}

div{
    border:1px black solid;
    padding:10px;
display: inline-block;
}

<div contenteditable="true" id="container" onkeydown="convertEnterToBrTag()">
When the Enter key is pressed, a new line break tag is created inside the container, rather than a new div element as currently happening.
</div>

Stop contenteditable from inserting a div element when the Enter key is pressed using only JavaScript, and

Answer №1

Answer №2

Answer №3

Similar questions

Gap in footer spacing on Internet Explorer is significantly large

What's the best way to animate the navigation on top of an image for movement?

Necessary Selection from Dropdown

Converting large numbers (exceeding 53 bits) into a string using JavaScript

Saving data to a variable with AJAX/JSON when the column name is numerical: Best practices

Mismatched Container Alignment in HTML and CSS

Is it possible to utilize the package.json "resolutions" field to replace lodash with lodash-es?

Is there a way to use JavaScript to convert HTML code into plain text?

The use of Angular's ngClass directive does not work within the link function

What is the best way to manage executing functions on data that could potentially be undefined?

MySQL field being updated upon page unload

Getting an array of all visible text on a page using the same locator in Selenium

Executing the split function on a 2D array in Google Apps Script while maintaining the original column indexing

Unable to display Bootstrap 4.3.1 button for Facebook

Error: An unexpected closing tag "<p>" was encountered while parsing the template

Tracking user engagement and traffic on a website with a single tracking ID for both screenviews and pageviews

Transforming AngularJS $http POST requests into GET requests

Develop two varieties of user account models using Mongodb/Mongoose

Encountering difficulty in accessing game.html following button clicks

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery