Limit the number of newline of dynamic textarea in jquery - javascript

I'm trying to limit the number of newline that can be enter in a dynamic textarea, but the codes I made is not working. I need to set atleast 4 newlines that the user can make. Also I set the maxlength to 40 characters.
here is my codes.
$(document).ready(function(){
$("[name='memo[]']").each(function(){
$(this).keydown(function() {
newLines = $(this).val().split("\n").length;
$(this).text(newLines);
if(e.keyCode == 13 && newLines >= 4) {
alert("Exceed");
return false;
}
});
});
});

Try this:
$(document).ready(function() {
$("[name='memo[]']").each(function() {
var textarea = $(this);
textarea.attr('maxlength', 40);
textarea.keydown(function(e) {
var newLines = textarea.val().split(/\r*\n/).length;
if (e.keyCode === 13 && newLines >= 4) {
e.preventDefault();
}
});
});
});
UPDATE:
Dont alert and the code works fine. Demo link is: http://jsfiddle.net/bobkhin/nJWk2/

get the lines in text area with the below example code and try...
String.prototype.lines = function() { return this.split(/\r*\n/); }
String.prototype.lineCount = function() { return this.lines().length; }

Related

JavaScript how to make backspace work in my keyCode text prompt?

I'm creating a way to type anywhere by intercepting the keydown event instead of using a text box for a project. I'm having trouble finding out how to implement the backspace. This is a shortened version of my code:
$(document).keydown(function(event){
typed = String.fromCharCode(event.keyCode);
display += typed;
document.getElementById("text").innerHTML = letterContainer;
});
I was trying to use the .replace function like this...
if (event.keyCode == 8) {
display.replace(typed,'');
}
...and put it at the beginning, but that doesn't work. Any ideas?
You're getting there. How are you emptying the text in the input tag?
if (event.keyCode == 8) {
display.replace(typed,'');
// ^ This does not change the value of the <input>
}
I'd suggest something like:
function isDeleteKeyCode(event) {
return event && event.keyCode === 8;
}
function resetValue(element) {
element.value = '';
}
$('#input-id').keydown(function(event) {
if (isDeleteKeyCode(event)) {
resetValue(event.target);
}
// ^ This can be simplified as: isDeleteKeyCode(event) && resetValue(event.target)
});
That would add a keydown listener to an input tag with id="input-id".
Demo: https://jsfiddle.net/pp16tru7/
var display = '';
$(document).keydown(function(event) {
var typed = String.fromCharCode(event.keyCode);
// if backspace, get text without the last character, else add character to display
if (event.keyCode === 8) {
display = display.substr(0, display.length - 1);
} else {
display += typed;
}
document.getElementById("text").innerHTML = display;
});

$(this).hide() hides containers it shouldn't

I have this little piece of code that filters through a list of results and hides the divs that don't match. I am writing this for a PhoneGap iOS application. It works fine on Android, but on iOS for some reason it hides the entire search field as well after typing a few characters, not just the results.
Any idea why? I've stripped it down to almost only the HTML code and jQuery and it's still happening. I tried commenting out the $(this).hide(); part and it stops hiding the search field, so I assume somehow that's the culprit, but I can't figure out why or how to fix this. Been at it for 10 hours straight. Any ideas? Maybe I can target the results some other way?
$('#box_search').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('#listing-results > .listing_container').show();
} else {
$('#listing-results > .listing_container').each(function() {
var text = ($(this).find('.listing_results_text_name').text() + $(this).find('.listing_results_text_name').data("alt")).toLowerCase();
if (text.indexOf(valThis) >= 0) {
$(this).show();
} else {
$(this).hide();
}
});
};
});
obviously I cant see the html but sometimes it helps to clean the code and just change the logic slightly
var box_search = function(e){
var myIndex = $(this).val();
val = (!myIndex || myIndex==='')?false:myIndex;
if(!myIndex){
$('#listing-results > .listing_container').show();
return;
}
//
$('#listing-results > .listing_container').each(function() {
var text = $(this).find('.listing_results_text_name').text() +
$(this).find('.listing_results_text_name').data("alt")
text = (!text || text==='')?false:text;
text = text.toLowerCase();
if(text.indexOf(myIndex.toLowerCase()) >= 0){
$(this).show();
return;
}
$(this).hide();
});
} //end of function
$('.box_search').keyup(box_search);

Jquery: An alternate method for fromcharcode() to convert integer to character

I'm coding a chat box. And the Characters that I enter, is not reflected as it is.
This is basically the code I'm using.
$(document).ready(function() {
$(".entry").keydown(function(event) {
console.log(String.fromCharCode(event.which));
});
});
And so when I type (lower-case) "a", console tab shows me "A".
special characters will not get reflected unless I create separate condition for it.
Could someone help me with a different function which does it all by itself, and returns a string as entered by the user. Or a different approach to this challenge all together. Thanks.
Actual code - chat.js
var str='';
$(document).ready(function() {
$(".entry").keydown(function(event) {
console.log(event.which);
if (event.which === 13 && event.shiftKey === false) {
console.log(str);
event.preventDefault();
} else {
var c = event.which;
str = str.concat(String.fromCharCode(c));
}
});
});
So basically the every character entered would get concated to the string. and Enter key would dump the text to console.
It's seems that trying to get the value of event.which in keydown event could lead you to a wrong ascii code (What you need to pass to String.fromCharCode).
See https://stackoverflow.com/a/10192144/3879872
I don't know if it fits your needs, but you could try:
$(document).ready(function(){
$(".entry").keypress(function(event) {
console.log(String.fromCharCode(event.which));
});
});
(Note the use of keypress instead of keydown)
EDIT: Added working Demo
var str = '';
$(document).ready(function() {
$(".entry").keypress(function(event) {
console.log(event.which);
if (event.which === 13 && event.shiftKey === false) {
console.log(str);
event.preventDefault();
} else {
var c = event.which;
str = str.concat(String.fromCharCode(event.which));
}
console.log('Formated Text', str);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="entry"></textarea>

How do I disable a button if a string is both empty or only has whitespace in it, in JavaScript?

$(document).ready(function() {
$('.expanding').on('keyup',function() {
var textarea = document.getElementsByTagName('textarea')[0];
var submitBtn = document.getElementById('submit-btn');
if(textarea.value == '') {
$('#submit-btn').attr('disabled', true);
} else {
$('#submit-btn').attr('disabled', false);
}
});
});
Here's my code so far. It works fine, but it's missing a feature. So by default, the value of the textarea is an empty string and therefore the button is disabled. However, any whitespace entered enables the button, which I don't want.
Do I use else if? Or an or in the if statement? How do I write this?
Thanks.
You could use trim():
if(textarea.value.trim() == '')
Using the .trim() or $.trim() functions below, strip out the leading & ending whitespaces and then check to see if textarea has a string length (which it won't if it was just a bunch of spaces).
$(document).ready(function() {
$('.expanding').on('keyup',function() {
// Using vanilla javascript
var textarea = document.getElementsByTagName('textarea')[0].trim();
// or with jQuery
var textarea = $.trim(document.getElementsByTagName('textarea')[0]);
var submitBtn = document.getElementById('submit-btn');
if( !textarea.length ) {
$('#submit-btn').attr('disabled', true);
} else {
$('#submit-btn').attr('disabled', false);
}
});
});
Just strip leading and trailing whitespace off the value:
if(textarea.value.replace(/^\s*(.*?)\s*$/, "$1") == '') {

break string into pieces and wrap each piece in html with js

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

Categories

Resources