I'm using a content editable div to try and make tags. When the user presses return, I need to be able to select the previous text (but not the previous tags) and turn it into a new tag. A tag will be wrapped in , so an example would be:
<em>tag1></em><em>tag2</em>tag3--- // about to press enter for tag3
This is what I'm thinking so far:
$('#tags').keydown(function(e) {
if (e.keyCode == 13 || e.which == 13) {
paste('---'); // this adds a separator when the user presses enter
var content = $(this).html();
var newTag = // the text between the last </em> and ---
newtag.wrapInEm(somehow);
event.preventDefault();
return false;
}
});
Maybe you should separate the current tags from the new tag creation.
HTML
<div id='tags'>
<span id='tag-list'></span>
<span id='tag-new' contenteditable></span>
</div>
JS
(function($){
var tags = ['tag1', 'tag2'];
$('#tag-new').on("keydown", function(e) {
e.preventDefault();
if (e.keyCode == 13 || e.which == 13) {
// if (!saveToDB) return;
tags.push($(this).text());
_renderTags();
return false;
}
});
$('#tag-list').on("click", "em", function(e){
// if (!deleteFromDB) return;
var idx = tags.indexOf($(this).html());
tags.splice(idx,1);
_renderTags();
});
function _renderTags(){
$('#tag-list').html("<em>" + tags.join("</em><em>") + "</em>");
}
$(document).ready(function(){
// loadTagsFromDB
_renderTags();
});
})(jQuery);
It's hard for me to understand your question--there are a handful of typos and your html sample doesn't make any sense.
Nevertheless:
How about using the [.wrap(]http://api.jquery.com/wrap/) jquery function?
$('#tags'.keydown(function(e) {
if (e.keyCode == 13 || e.which == 13) {
$([selector for previous text]).text().wrap(<em></em>);
}
});
Related
I have a textarea and when click enter it doesn't insert a linebreak,
I tried to use the following code, But, when i press enter, it goes to the end fo text and add new line.
$("#descre").on('keydown', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
event.preventDefault();
var s = $(this).val();
$(this).val(s + "\n");
}
});
I want to make a normal enter press, like ex: jsfiddle
My textarea was not working well, so to accept enter key press on normal behaviour i used the code:
$('#descre').keypress(function(e) {
if (e.keyCode == 13) {
e.preventDefault();
this.value = this.value.substring(0, this.selectionStart) + "" + "\n" + this.value.substring(this.selectionEnd, this.value.length);
}
});
You have passed e in the function as argument but in the if block you are doing event.preventDefault() change it to e.preventDefault()
//i try this one
$("#descre").on('keydown', function(e) {
var code = e.keyCode || e.which;
if(code == 13) { //Enter keycode
e.preventDefault();
var s = $(this).val();
$(this).val(s);
}
});
You are adding an extra line in the end yourself. Thats why it is inserting the extra k=line
Situation
browser
Google Chtome 69
html
<textarea id="message" name="message">
// input some messsage
</textarea>
js(jQuery)
$(function () {
$("#message").on("keydown keyup keypress change", function () {
//this part runs correctly
})
$('#message').on('keydown', function (e) {
if ((e.wich && e.wich === 13) || (e.keyCode && e.keyCode === 13)) {
var $textarea = $(this);
var sentence = $textarea.val();
var position = $textarea.selectionStart;
var length = sentence.length;
var before = sentence.substr(0, position);
var after = sentence.substr(position, length);
sentence = before + "\n" + after;
}
});
});
When I input something in the #message textarea and push Enter key in the area, nothing would happen. According to Chrome developer tool, selectionStart method seems to return Undefined.
Needs
Enter key has been made disabled in this form page in order to avoid submitting the data mitakenly.
js
function fnCancelEnter()
{
if (gCssUA.indexOf("WIN") != -1 && gCssUA.indexOf("MSIE") != -1) {
if (window.event.keyCode == 13)
{
return false;
}
}
return true;
}
However, in this textarea, I want to enable user to add a break line by pressing Enter key.
I'm sorry but I don't have much knowledge about jQuery and javascript. Please tell me how to do.
Please replace $textarea.selectionStart by $textarea.get(0).selectionStart. Then try again.
For the following code:
document.getElementById('text_one').onkeypress = function (e) {
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13') {
text = document.getElementById('text_one').value;
if (text == "" || text === null || text.length > 50) {
$('#error_msg').show('slow');
document.getElementById('text_one').disabled = true;
document.getElementById('text_one').value = "";
return false;
} else {
$('#list').append('<li>' + text + '</li><br />');
document.getElementById('text_one').value = "";
}
}
};
How would one go about making a function that deletes the element which was clicked? I was thinking that you could somehow create a specific number that increases every time the function is run and use that number to create custom ID's but I'm not sure how to do that.
JS Fiddle: http://jsfiddle.net/2dd5L/ (The CSS is messed up for some reason)
Since you are using jQuery it's very simple (in pure JS also just 2 more lines of code):
$('#list').on('click', 'li', function() {
$(this).remove();
});
Demo: http://jsfiddle.net/2dd5L/1/
I try to make a element via using contenteditable to submit some title, That way I want users type/paste title only one line.
$('.title').on('keypress',function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
e.preventDefault();
}
}).on('paste',function(){
var text = $(this).text();
$(this).html(text).focus();
});
Problem is paste event, When I paste some text, I can't use .focus() to select/point text to the last charecter.
What I did wrong ?
I have idea now...
jQuery :
$('.title').on('keypress',function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
e.preventDefault();
}
}).on('paste',function(){
$('br,p',this).replaceWith(' ');
});
CSS : (not request)
.title br {display:none;}
I've got the following code:
document.onkeydown=function(e) {
if (e.which == 13 && isCtrl) {
log('Ctrl CR');
} else if (e.which == 17) {
isCtrl = true;
};
I need to insert a Carriage Return/Line feed where the cursor is located in the input textarea.
Now that I think about it, I should probably be using a textarea selector instead of document.onkeydown, but $('textarea').onkeydown doesn't work.
$('textarea').keydown(function (e){
var $this = $(this);
if (e.which === 13 && e.ctrlKey) {
$this.val($this.val() + '\r\n'); // untested code (to add CRLF)
}
});
Reference
.keydown
Event object