I'm working on a chat app with Meteor and I don't want users to be able to copy/paste things into the form for obvious spam reasons. Is this possible? Here is the code I use to run the chat app:
Javascript:
// render all of our messages in the ui
Template.chatBox.helpers({
"messages": function() {
return chatCollection.find();
}
});
// get the value for handlerbar helper user
Template.chatMessage.helpers({
"user": function() {
if(this.userId == 'me') {
return this.userId;
} else if(this.userId) {
getUsername(this.userId);
return Session.get('user-' + this.userId);
} else {
return 'anonymous-' + this.subscriptionId;
}
}
});
// when Send Chat clicked at the message to the collection
Template.chatBox.events({
"click #send": function() {
if (Meteor.user() == null) {
alert("You must login to post");
return;
}
$('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
var message = $('#chat-message').val();
// check to see if the message has any characters in it
if (message.length < 1) {
alert("You must enter a message to post.");
return;
}
chatCollection.insert({
userId: 'me',
message: message
});
$('#chat-message').val('');
//Validation
var bot =Check_bots();
if(bot==false)
{
//add the message to the stream
chatStream.emit('chat', message);
}
else
{
alert("Slow down! No need to post that fast.");
return false;
}
},
"keypress #chat-message": function(e) {
if (Meteor.user() == null) {
alert("You must login to post");
return;
}
if (e.which == 13) {
//Validation
var bot =Check_bots();
if(bot==false)
{
$('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast");
console.log("you pressed enter");
e.preventDefault();
//repeat function from #send click event here
var message = $('#chat-message').val();
// check to see if the message has any characters in it
if (message.length < 1) {
alert("You must enter a message to post.");
return;
}
chatCollection.insert({
userId: 'me',
message: message
});
$('#chat-message').val('');
//add the message to the stream
chatStream.emit('chat', message);
}
else
{
alert("Slow down! No need to post that fast.");
return false;
}
}
}
});
chatStream.on('chat', function(message) {
chatCollection.insert({
userId: this.userId,
subscriptionId: this.subscriptionId,
message: message
});
});
var lastintime=0;
var defference=0;
var msg_count=0;
function Check_bots()
{
var seconds = new Date().getTime() / 1000;
seconds=parseInt(seconds);
if(lastintime < seconds)
{
defference = seconds -lastintime;
lastintime=seconds;
if(defference<=5 && msg_count>=3)
{
return true;
}
else
{
return false;
}
}
}
I have no idea where to even start with this. How do you prevent copy/pasting?
It's not a good idea. Internet Explorer has a onpaste event, and there's been a convoluted implementation on Stack Overflow, but in general it's messy, crosses lines that generally shouldn't be crossed in web design, impossible to pull off completely across all browsers, and can be circumvented without too much trouble.
It's a far better idea to put character-rate limits and detect red flags for spam, like high link density and repetition.
Related
This is my code, I'm attempting to set up a combo lock for a game that will unlock when the user inputs the correct answer. However, when the user inputs something it will always return "The door is unlocked." What am I missing or doing wrong here?
function comboLock(){
this.comboLock = ["666"];
this.falseInput = /[^1-5, 7-9]/g;
}
comboLock.prototype.unlock = function(){
if (this.comboLock != this.falseInput){
return alert("the door is unlocked");
}
else if (this.comboLock === this.falseInput){
return alert("that is not the correct combonation");
}
}
$(document).ready(function(){
$("#button-unlock").click(function(event) {
event.preventDefault();
if (this.comboLock = "666"){
return alert("the door is unlocked");
}
else if (this.comboLock != "666"){
return alert("that is not the correct combonation");
}
})
})
like the question asks, I'm trying to communicate with a serial device through a chrome app, via a webpage. The objective is to turn on a switch with a button on a webpage, and make sure the switch is in fact on (serial response).
So far I have been able to turn on the switch fine, however I need to validate that it is in fact enabled.
My chrome app code:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request.request == 'info') {
sendResponse(DEVICE_INFO);
} else if (request.request == 'turn_off') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('f');
}
});
//INSTEAD OF "OK" I NEED IT TO ASK THE DEVICE TO CONFIRM OFF/ON STATUS
sendResponse('OK');
} else if (request.request == 'turn_on') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('n');
}
});
sendResponse('OK');
}
return true;
});
If I send a "status" query to the device, it's going to take a few milliseconds for it to respond "off" or "on" to the serial buffer. Any ideas on how to go about this? Thanks in advance.
Ultimately I got it to work by requesting the device status within the listener block of code. Below are the modifications, crude but it gets the job done. DEVICE_STATUS is being updated by an onReceive listener on the serial connection.
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request.request == 'info') {
sendResponse(DEVICE_INFO);
} else if (request.request == 'turn_off') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('f');
}
});
var time_loop = 0;
connection.send('s'); // s is for STATUS
var timer = setInterval(device_is_off, 200);
function device_is_off(){
if (time_loop > 5){ //Serial Communication Timeout at 1sec
sendResponse('ERROR ' + DEVICE_STATUS);
clearInterval(timer);
return;
}
if (DEVICE_STATUS == 0){
sendResponse('OK');
clearInterval(timer);
return
}
else time_loop++;
}
} else if (request.request == 'turn_on') {
device_array.forEach(function(device){
if (device.id == request.device_id){
device.send('n');
}
});
var time_loop = 0;
connection.send('s'); // s is for STATUS
var timer = setInterval(device_is_on, 200);
function device_is_on(){
if (time_loop > 5){
sendResponse('ERROR ' + DEVICE_STATUS);
clearInterval(timer);
return;
}
if (DEVICE_STATUS == 1){
sendResponse('OK');
clearInterval(timer);
return
}
else time_loop++;
}
}
return true;
});
Below is a simple jQuery code for showing error messages on submission of form, if the given conditions are not fulfilled. This works fine and shows error messages on form submission but I want to change it to keyup function which seems easy, changing $('#submit').click(function() { to $("input").keyup(function(){ works. Now problem is error messages appears on keyup if condition is not fulfilled but does not disappear if condition is fulfilled until I go to next input leaving some error so that inputs error message appears. So what changes I need to make in my code so that error message appearing on keyup disappera as soon as that condition is fulfilled.
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var title = document.getElementById('title').value;
var category = document.getElementById('category').value;
if (category == "") {
$('#er').html('Oops! Please select a category from the options.');
return false;
}
else if (title == "") {
$('#er').html('Oops! Title cannot be empty.');
return false;
}
else if (title.length > 100 || title.length < 5) {
$('#er').html('Oops! Make sure title is 5 to 100 characters long.');
return false;
}
});
});
</script>
Try to .empty() the error message initially in the event handler,
$('input').keyup(function() {
var title = document.getElementById('title').value;
var category = document.getElementById('category').value;
var error = $('#er').empty();
if (category == "") {
error.html('Oops! Please select a category from the options.');
return false;
}
else if (title == "") {
error.html('Oops! Title cannot be empty.');
return false;
}
else if (title.length > 100 || title.length < 5) {
error.html('Oops! Make sure title is 5 to 100 characters long.');
return false;
}
});
});
When I click the follow button, socket.io sends some data to the server, and then the server sends back a response number. According to what the number is, js alerts a message. But if I click the button a second time, js will alert the same message twice, and if I click it again, three times and so on. If I refresh the page, it starts all over again (click it once, alert shows up once, click it twice, alert shows up twice...)
Here's the code:
$('.followUser').click(function(e){
e.stopImmediatePropagation();
e.preventDefault();
var user= $(this).parent().parent().parent().parent().next().children().children('.userName').children().first().children().attr('id');
var thisUserId = $.cookie('thisUserID');
if(user != thisUserId){ //if he tries to follow himself
var object = {
user: user,
userId: thisUserId
}
socket.emit('followUser', object); //server just adds that user to the following list of the first user
socket.on('followUserResults', function(data){
if(data == 1){
alert('Something went wrong! Please refresh this page and try again'); // if they changed the id on html
} else if(data == 0){
alert('User was added to your following list!');
} else if(data == 2){
alert('This user is already on your following list!');
}
});
} else {
return false;
}
Can you please help me with that? Thank you!
I am slightly unclear as to what is trying to be achieved but I've noticed an error in your code straight away.
This code should be outside of the $('.followuser').click function:
socket.on('followUserResults', function(data){
if(data == 1){
alert('Something went wrong! Please refresh this page and try again'); // if they changed the id on html
} else if(data == 0){
alert('User was added to your following list!');
} else if(data == 2){
alert('This user is already on your following list!');
}
});
So your code should read like:
$('.followUser').click(function(e){
e.stopImmediatePropagation();
e.preventDefault();
var user= $(this).parent().parent().parent().parent().next().children().children('.userName').children().first().children().attr('id');
var thisUserId = $.cookie('thisUserID');
if(user != thisUserId){ //if he tries to follow himself
var object = {
user: user,
userId: thisUserId
}
socket.emit('followUser', object); //server just adds that user to the following list of the first user
} else {
return false;
}
socket.on('followUserResults', function(data){
if(data == 1){
alert('Something went wrong! Please refresh this page and try again'); // if they changed the id on html
} else if(data == 0){
alert('User was added to your following list!');
} else if(data == 2){
alert('This user is already on your following list!');
}
});
Try put the socket.on(...) outside the click callback function, if still not working properly, I would need watch the server code.
$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked = true) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
});
});
Everytime I put text in the text input, the <li> will display for only a moment, but the page will refresh and it will disappear. Sorry if this is obvious, I'm still learning.
Don't allow the page to refresh. Return false at the end.
$(document).ready(function() {
$("#btn").click(function() {
$("#form").toggle();
});
$("#submit").click(function() {
if ($(".product").checked) {
alert("Thank You!")
} else {
alert('Please Choose A Product');
}
var name = $("input:text").val();
var nLi = $("<li>").appendTo("ul");
nLi.text(name);
return false;
});
});
And please change
if ($(".product").checked = true) {
to
if ($(".product").checked == true) {
Try to use event.preventDefault() in your click event, for example:
$("#submit").click(function(e) {
e.preventDefault();
}
for more info about this jquery method event.preventDefault()