Prevent user from pasting line break - javascript

I'm currently having an issue with a code. In my code, I've got a textarea where the user can enter the title of an article and I would like this article to be only in one row. That's why I wrote a script to prevent users to press the return key. But they could bypass this security, indeed if they copy/past the line break they could enter a line break. So, is there a way to detect line break ? I suppose we can do this with regular expressions and with \n or \n. However I tried this:
var enteredText = $('textarea[name="titleIdea"]').val();
var match = /\r|\n/.exec(enteredText);
if (match) {
alert('working');
}
and it doesn't work for an unknown reason. I think the var enteredText = $('textarea[name="titleIdea"]').val(); doesn't work because when I try to alert() it, it shows nothing. But something strange is that when I do an alert on $('textarea[name="titleIdea"]').val(); and not on the enteredText variable it shows the content.
Have a great day. (sorry for mistakes, I'm french)

if they copy/past the line break they could enter a line break
That's why you shouldn't even worry about preventing them from entering it - just don't save it. Remove it on the blur and input events if you really want to, but the only time it actually matters is before you save it to the database (or whatever you are using).
$('textarea[name="titleIdea"]').on('blur input', function() {
$(this).val($(this).val().replace(/(\r\n|\n|\r)/gm,""));
});
And, as other people have already mentioned, if they can't do line breaks, you shouldn't be using a textarea.

I assume your problem is with the paste event.
If i guessed this is my snippet:
$(function () {
$('textarea[name="titleIdea"]').on('paste', function(e) {
var data;
if (window.clipboardData) { // for IE
data = window.clipboardData.getData('Text');
} else {
data = e.originalEvent.clipboardData.getData('Text');
}
var match = /\r|\n/.exec(data);
if (match) {
alert('working');
console.log(data);
}
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<textarea name="titleIdea">
</textarea>

This needs to be handled in the backend. Even if you use the recommended appropriate HTML input type of text (instead of textarea), you still do not remove the possibility of return chars getting saved.
The two other answers use Javascript - which technically is the domain of this question. However, this can not be solved with Javascript! This assumes that the input will always come from the form you created with the JS function working perfectly.
The only way to avoid specific characters being inserted into your database is to parse and clean the data in the backend language prior to inserting into your database.
For example, if you are using PHP, you could run a similar regex that stripped out the \n\r chars before it went into processing.
Javascript only helps the UX in this case (the user sees what they will be saving). But the only way to ensure you have data integrity is to validate it on the server side.

Related

Replace / restrict non-standard characters in CKEDITOR

I have a CKEDITOR instance (version 4.5.7) into which users input content. This content posts to a database field with the collation SQL_Latin1_General_CP1_CI_AS.
The problem comes when a user pastes text from Word or a similar rich-text editor. Two characters in particular get malformed when they hit the database: ” (”) and – (–).
I have already set config.entities to false to prevent the characters from being converted into their HTML equivalents. Now I'm looking for a place where I can intercept the process to find/replace any offending characters. Although the javascript for this sort of thing is easy enough ( text = text.replace('”', '"') ), I'm not sure where to put it in order to make this happen. I've tried placing it in various places within the CKEDITOR.htmlParser.basicWriter function, but nothing so far has worked.
This seems like it would be a fairly common problem - is there perhaps a way to set collation on the editor so it matches the database?
Thank you for any advice.
I kept plunking away in the basicWriter function until eventually I was surprised to find one place that actually does work. Basically, this is the process I used to solve this problem without editing ckeditor.js
Download and open an uncompressed version of the ckeditor.js file.
Locate and copy the entire CKEDITOR.htmlParser.basicWriter function into the bottom of your config.js file. This basically redefines the function, overriding the real one but allowing us to make customizations to it without necessarily breaking future updates.
In the copied function within config.js, locate the getHtml section and customize the html variable before it gets returned. Below is a template to help you locate this section
getHtml: function( reset ) {
var html = this._.output.join( '' );
// this is where we can replace individual characters or make other
// customizations
html = html.replace('”', '"');
html = html.replace('–', '-');
if ( reset )
this.reset();
return html;
}

javascript validation with regular expression not working

In my asp.net web application. I need to validate a textbox entry to avoid these special characters \/:*>"<>|.I planned to replace the character with empty string, and for that wrote a javascript function and addded the attribute to call the function from server side as below
txtProjectName.Attributes.Add("onkeyup", "ValiateSpecialCharacter()");
As of this every thing is fine and the function is called.while enter any character. The function is
function ValiateSpecialCharacter(){
var txt=document.getElementById("<%=txtProjectName.ClientID%>").value;
txt.replace(/[\\\/:*>"<>|]/g, '');
alert(txt);
document.getElementById("<%=txtProjectName.ClientID%>").value=txt;
}
I use a regular expression in the function to do this. But the test is not getting replaced as planned. Is there any mistake in this code.Also note that the alert is working.
Try to get the result in txt ie, get the value of replaced text inside your variable.
txt = txt.replace(/[\\\/:*>"<>|]/g, '');
In your query you getting previous value.Assign properly like this txt = txt.replace(/[\\\/:*>"<>|]/g, '');.It show the latest result in alert box.
function ValiateSpecialCharacter(){
var txt=document.getElementById("<%=txtProjectName.ClientID%>").value;
txt = txt.replace(/[\\\/:*>"<>|]/g, '');
alert(txt);
document.getElementById("<%=txtProjectName.ClientID%>").value=txt;
}
This is not what you asked, but seems like a strange way to go about your needs. Unless, I misunderstood the question. Since you are running ASP.NET on the server, why use JavaScript for server validation?
It usually does make sense to validate input on the client. For that, you need to hook an event like form submit to call the javascript function.
If you want to validate on the server, use something like, inside a function handling form submit:
Regex re = new Regex("^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9](?:\\.[a-zA-Z]{1,})+$");
if (!re.IsMatch (domain.Text)) {
warningLabel.Text = "Domain format is invalid!";
formError = true;
}
Obviously, you don't validate the domain so change the regex etc. No JavaScript is needed for server-side validation.

Ignore commas in a text input field when submitting

So I've made this search that does what its supposed to do front-end wise. However, when submitting I'd like the query to ignore commas.
Right now I'm using commas to make a comma separated search. The whole thing is, when I submit; the comma's are included and thus messes up my search values.
Is there any way to ignore comma's upon submit?
Example: Searching [Example][Test] will actually return Example,Test.
I've made a fiddle here
Any suggestions and help is greatly appreciated.
var firster = true;
//capture form submit
$('form.nice').submit(function(e){
if(firster){
// if its the first submit prevent default
e.preventDefault();
// update input value to have no commas
var val = $('input').val();
val = val.replace(/,/g, ' ');
$('input').val(val);
// let submit go through and submit
firster = false;
$(this).submit();
}
});
DEMO
Looking at your profile, I'm guessing you're using python as a server-side language. The issue you're trying to solve is best dealt with server-side: never rely on front-end code to escape or format data that is being used in a query... check Bobby Tables for more info
Anyhow, in python, you could try this:
ajaxString.replace(",","\", \"")
Thiis will replace all commas witIh " OR ", so a string like some, keywords is translated into some", "keywords, just add some_field IN (" and the closing ") to form a valid query.
Alternatively, you can split the keywords, and deal with them separately (which could come in handy when sorting the results depending on how relevant the results might be.
searchTerms = ajaxString.split(",")
>>>['some','keywords']
That should help you on your way, I hope.
Lastly, I'd suggest just not bothering with developing your own search function at all. Just add a google search to your site, they're the experts. There is just no way you, by yourself, can do better. Or even if you could, just imagine how long it'd take you!
Yes, sometimes a company will create their own search-engine, but only if they have a good reason to do so, and have the resources such an endevour requires. Programming is often all about being "cleverly lazy": Don't reinvent the wheel.

Populating Textareas with JavaScript

This is an extension of a previous question I asked. I ran into some additional issues.
I am loading a form with dynamic textarea boxes. Don't ask why, but I need to populate these fields using JavaScript (has to deal with AJAX stuff, etc). To simplify things, let's just say my textarea has a name of "myTextarea" and I want to populate with a request parameter "myRequestParam". So I'd want to do something like:
updateTextareaText("myTextarea", "${myRequestParameter}");
From my previous question, I've found that this solves some issues:
updateTextareaText("myTextarea", unescape('<c:out value="${myRequestParam}" />'));
I have tried a number of different implementations for updateTextareaText, but nothing seems to work. I need to handle both newlines and special characters.
Try #1
function updateTextareaText(textareaElementName, newText) {
var textareaBox = document.getElementsByName(textareaElementName)[0];
textareaBox.innerHTML = newText;
}
Try #2
function updateTextareaText(textareaElementName, newText) {
var textareaBox = document.getElementsByName(textareaElementName)[0];
textareaBox.value = newText;
}
Try #3
function updateTextareaText(textareaElementName, newText) {
var textareaBox = document.getElementsByName(textareaElementName)[0];
var existingNodes = textareaBox.childNodes;
if (existingNodes.length > 0) {
textareaBox.removeChild(existingNodes[0]);
}
var newTextNode = document.createTextNode(newText);
textareaBox.appendChild(newTextNode);
}
All of the above loose newlines and/or displays some special characters as their escaped values. I've been using the following myRequestParam value for testing:
Test
Newline and Special `~!##$%^&*()_+-={}|[]\:";'<>?,./
Does anyone know the correct way to handle all of the different cases? As a side note, the myRequestParam values are populated from the DB and are returning newlines as \r\n which I have been escaping as %0A, but I am not sure if that's what I should be doing. The JavaScript originally wouldn't handle the \r\n (it would complain about unterminated strings, etc).
See another question that I submitted. The trick was to remove the escaping from the backside and the whole escape and <c:out> stuff and instead use an EL function that utilizes StringEscapeUtils.escapeJavaScript.
Try jQuery:
$('#textAreaId').val('MyValue');
or
$('#textAreaId').html('MyValue');
Guess it would do the trick.
In a limited and local try it worked for me with your #2 function (only tried that one).
header: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
javascript: updateTextareaText("txtarea", "Test\n\nNewline and Special `\~!##$%\^\&*()_+-={}|[]\:\";'<>?,.//\näöüÄÖÜß");
So the String you get is probably not escaped (\', \&, etc.), in which case Apache's StringEscapeUtils in Commons Langs helps ( http://commons.apache.org/lang/api-2.5/org/apache/commons/lang/StringEscapeUtils.html#escapeJavaScript%28java.lang.String%29 ).
Other than that, you would have to do a conversion for this javascript case by replacing ' with \' and so on... not pretty.

JS/jQuery : Best way to get typed characters after '#' in textarea

I am creating a smart textarea that needs to recognise a term typed after the '#' symbol.This needs to be able to work for the term CURRENTLY being typed and be able to work for multiple instances of the '#' symbol in a single textarea.
It is designed to work the same way as Facebook when you type the '#' symbol to tag a person in a post. A drop down list will appear and list items will get filtered depending on the term after the '#' symbol.
This also needs to work if the user were to type a term then amend it later. I understand this complicates things a little.
What is the best way to achieve this functionality?
I don't know if it helps but here's i small script to find the hashes.
http://jsfiddle.net/aNgVV/
I suggest you look at the jQuery UI demo for the Autocomplete widget, specifically the demo for using a remote datasource with cache. Specifically for the following reasons:
It automatically takes care of the drop-down widget you mentioned.
It demonstrates how you can populate that drop-down with items based on an AJAX call (which I presume you need).
The demo for Autocomplete caching parses the text in the INPUT element, as it tries to determine whether or not the value the user is currently typing has already been cached, and reacts accordingly. I assume you can do something similar to check for the # types, and to check if a previous # tag is being modified as well.
Initially you need to catch the '#' key being pressed and then capture the subsequent key presses and pass them to a function to handle your auto completion requirements. A rough outline to of the code is below. You may need to catch whitespace key presses as well to stop the auto-completion.
var hashKeyPressed = false;
$('#TextArea').keyup(function(event) {
if(event.keyCode == '222') {
// this will catch the '#' key
hashKeyPressed = true;
}
if(hashKeyPressed) {
// Here you can start build up subsequent key presses into a string
// and pass them to a function to handle the auto-completion
}
});
You can capture the keyup event and check what has been entered last like so:
$('#myTextArea').keyup(function () {
var len = $(this).val().length;
if ($(this).val().substring(length - 1, 1) == '#') {
// Do whatever you want to do here
}
});
EDIT:
You are right - you could do it this way instead:
$('#myTextArea').keypress(function (e) {
if (e.which == 222) {
// do something here
}
});

Categories