Reputation: 55
I have the following code:
Type some text in place of the [Header] and press enter.
As you can see on clicking enter in the h2 element the cursor shifts to span element.
However, it adds an extra line in the beginning.
I don't know how to remove a line from the end.
function enter() {
if (event.key == "Enter") {
$("div#text span").focus();
}
}
var h = $('h2').offset();
$('div#text span').click(function() {
});
div#text {
padding: 5px;
margin: 0;
width: 99.3%;
height: 99%;
resize: none;
font-family: 'Callibri';
font-size: 25px;
text-align: left;
z-index: 99;
line-height: 30px;
background-color: white;
overflow-y: scroll;
cursor: text;
}
h2 {
text-align: center;
font-size: 40px !important;
}
h2:focus,
div#text span:focus {
outline: none;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text" spellcheck="false">
<h2 contenteditable="true" onkeydown="enter()">[Header]</h2><span contenteditable="true">[Body]</span>
</div>
Upvotes: 0
Views: 242
Reputation: 6233
Use event.preventDefault
to override default behaviour on pressing enter key.
function enter() {
if (event.key == "Enter") {
event.preventDefault();
$("div#text span").focus();
}
}
var h = $('h2').offset();
$('div#text span').click(function() {
});
div#text {
padding: 5px;
margin: 0;
width: 99.3%;
height: 99%;
resize: none;
font-family: 'Callibri';
font-size: 25px;
text-align: left;
z-index: 99;
line-height: 30px;
background-color: white;
overflow-y: scroll;
cursor: text;
}
h2 {
text-align: center;
font-size: 40px !important;
}
h2:focus,
div#text span:focus {
outline: none;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text" spellcheck="false">
<h2 contenteditable="true" onkeydown="enter()">[Header]</h2><span contenteditable="true">[Body]</span>
</div>
Upvotes: 1