How to stop writing in textbox by using JavaScript - javascript

I want to enter only 3 words in a textbox. My JavaScript code is below:
jQuery('#Txt_Report').keyup(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
/////////////
//How can I stop entering text in txt_report anymore?
/////////////
});
}
}
As you see, I want to block user to not to enter more than 3 words. If someone knows how to handle this please help.

You can't preventDefault using keyup. Using keydown or keypress should work. Here is the example:
$('#Txt_Report').keypress(function(e) {
if (e.which == 32) {
var count = this.value.split(' ').length;
if (count > 2) {
e.preventDefault();
}
}
});

Use event.preventDefault(); with keydown (as suggested by the comments)
Demo: http://jsfiddle.net/wTvmz/
jQuery('#Txt_Report').keydown(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
event.preventDefault();
}
}
});

Set the disabled attribute to disabled.
jQuery('#Txt_Report').keyup(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
/////////////
//How can I stop entering text in txt_report anymore?
/////////////
jQuery('#Txt_Report').attr('disabled', 'disabled');
});
}
}
Ref: http://www.w3schools.com/tags/att_input_disabled.asp

Why not utilize "keypress" and return false?
http://jsfiddle.net/kW9tF/
$('#txt').keypress(function (event) {
return false;
});
Updated code example: http://jsfiddle.net/kW9tF/1/
$('#txt').keypress(function (event) {
var count = $(this).val().split(' ').length;
if (count > 2) {
return false;
};
});

Related

grab both the right and the left clicks of a user simultaneously

So my problem is this,
I was wondering if there was a way to detect if a user right clicks and left clicks simultaneously and commit an action if doing so in jQuery. It seems like the code can only detect one right click or one left click at a time in mouse events.
UPDATE
Thanks for the answers, I decided ultimately that feature would be too funky to have for users when I was trying to implement it. Hopefully these answers will be able to help other people too.
You can create variables to hold the state of each mouse button individually and use that to determine whether both buttons are down:
window.isLeftMouseDown = false;
window.isRightMouseDown = false;
$(document).on('mousedown', function(e) {
if (e.which == 1)
window.isLeftMouseDown = true;
else if (e.which == 3)
window.isRightMouseDown = true;
if (window.isLeftMouseDown && window.isRightMouseDown) {
console.log('both down');
}
});
$(document).on('mouseup', function(e) {
if (e.which == 1)
window.isLeftMouseDown = false;
else if (e.which == 3)
window.isRightMouseDown = false;
});
https://jsfiddle.net/2j151tpt/
Something like this. It uses ES2015.
let left = false;
document.addEventListener('mousedown', e => {
if (e.button === 0) {
left = true;
} else if (e.button === 2 && left) {
fireYourFunctionForTwoButtons();
}
})
document.addEventListener('mouseup', e => {
if (e.button === 0) {
left = false;
}
});
My proposal is based on the elapsed time in milliseconds between the two consecutive clicks:
$(function () {
$('#btn').data('last-left-click', 0).on('mousedown contextmenu', function (e) {
var nowTime = Date.now();
if (e.which == 1) {
$(this).data('last-left-click', nowTime);
}
if (e.which == 3) {
// if less then 300 milliseconds....
if ((nowTime - $(this).data('last-left-click')) < 300) {
console.log('Both left and right clicked in sequence in less then 300 milliseconds!');
}
$(this).data('last-left-click', 0);
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<button id="btn">Click Me</button>

Jquery Tab panel to get focus on key press

I have a jquery tab panel. This panel contains some user controls like textboxes. My requirement is to set focus on tab when I press Shift+T. This is not happening. I have used the following code.
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").keypress(function () {
if (e.keyCode == 80 && e.keyCode == 18)
$("#tabs").focus();
});
$("#tabs").focus(function () {
if (e.keyCode == 37) {
selected = (selected - 1);
$('#tabs').tabs('option', 'selected');
}
if (e.keyCode == 39) {
selected = (selected + 1);
$('#tabs').tabs('option', 'selected');
}
});
});
</script>
I am not sure why you need to complicate it.
Try this demo:
http://jsfiddle.net/lotusgodkk/GCu2D/417/
JS:
$(document).ready(function () {
$(document).on('keydown', function (e) {
var keyCode = e.keyCode;
if ((keyCode == 84) & (e.shiftKey)) {
$('.ui-state-active:visible:first').focus(); //ui-state-active is the class of active tab.
}
});
$('#tabs').tabs();
});
you should try this:
inputs = $("table :input");
$(inputs).keypress(function(e){
if (e.keyCode == 13){
inputs[inputs.index(this)+1].focus();
}
});
i guess might be work for u Click Here
js
$("#status").keydown(function (e) {
if (e.which == 9) {
$("#statuses").html(this.value);
this.value = "";
$("#status").focus();
e.preventDefault();
}
});
first -> remove double qoutes .. they are used for components like input, p etc.
second -> try this code..
$(document).ready(function () {
$('#tabs').keypress(function () {
if (e.keyCode == 80 && e.keyCode == 18)
$('#tabs').focus(); // setting the focus
alert("working"); //test it
});
$('#tabs').focus(function () {
if (e.keyCode == 37) {
selected = (selected - 1);
$('#tabs').focus(); // setting the focus
$('#tabs').tabs('option', 'selected');
}
if (e.keyCode == 39) {
selected = (selected + 1);
$('#tabs').tabs('option', 'selected');
}
});
});
</script>

Disable mouse right click and don't change cursor position In Javascript

I want to disable mouse right click and don't change cursor position In Javascript. Here is my code example:
<input id="PhoneNumber" style="width: 160px;" />
$('#PhoneNumber').mousedown(function (e) {
if (event.which > 1) {
e.preventDefault();
} else {
//Do some work
}
});
But This doesn't work. When i am clicking with right mouse button, it changes caret position.
[UPDATED]
Works on chrome. Doesn't working on IE
You need to subscribe to the mouseup event also:
$('#PhoneNumber').on('mousedown mouseup', function (e) {
if (event.which > 1) {
e.preventDefault();
} else {
//Do some work
}
});
You should use the contextmenu event and return false:
$('#PhoneNumber').on("contextmenu", function(e) {
return false;
});
you can use contextmenu:
$('#PhoneNumber').contextmenu(function (e) {
e.preventDefault();
});
Working Demo
$('#PhoneNumber').bind("cut copy paste contextmenu", function (e) {
e.preventDefault();
var pos = ($(this).getCursorPosition());
var index = $('#PhoneNumber').val().length;
if (index < 5) {
index = 5;
}
$(this).caretTo(index);
});
$('#PhoneNumber').click(function () {
var pos = ($(this).getCursorPosition());
var index = $('#PhoneNumber').val().length;
if (index < 5) {
index = 5;
}
$(this).caretTo(index);
});
$('#PhoneNumber').on('mousedown mouseup', function (e) {
if(event.which!=1) {
e.preventDefault();
e.returnValue = false;
}
});

How to restrict paste function after the maxlength

I have got a task to restrict paste function when it comes to maximum. For that I used the code
$(document).on('keyup', '.txtStyle', function (e) {
debugger;
var charsSoFar = $('#' + container_id).val().length;
remaining = 500 - charsSoFar;
$('#rem_' + container_id).text('Characters remaining ' + remaining);
if (charsSoFar > 500) {
alert("Hai");
}
});
How can I restrict the Paste function? Please help
As my understanding you want to stop user input once its reach max, so i suggest
if (textbox.val().length >500 )
textbox.val(textbox.val().substring(0,500));
It will give illusion that after 500 char user can't input or paste in textbox.
Take look on this..... This will help you.
if (event.ctrlKey==true && (event.which == '118' || event.which == '86')) {
alert('Paste Restricted!');
e.preventDefault();
}
Demo : http://jsfiddle.net/6Gdkk/
$(document).on('keyup', '.txtStyle', function(e) { debugger;
var charsSoFar = $('#' + container_id).val().length;
remaining = 500 - charsSoFar;
$('#rem_' + container_id).text('Characters remaining ' + remaining);
if (charsSoFar > 500) {
if (e.keyCode == 86 && e.ctrlKey) {
alert("Hai");
}
}
});

textbox value with hard coded dash

I have a textbox in the page. <input type="text" id="cell">
I have used below jquery....
i = 0;
$(document).ready(function () {
$("#cell").keypress(function () {
i += 1;
if (i == 4) {
var cellValue = $("#cell").val() + "-";
$("#cell").val(cellValue);
}
});
});
whenever an user types 12345678 (or any number) it automatically shows 123-45678. But problem is when user uses backspace or delete and then starts typing 12345678 it does not show 123-45678. Please help
i should be the length of the value , not the number of times you pressed the key
Try this -
$("#cell").keypress(function () {
i = $(this).val().length;
if (i == 3) {
var cellValue = $("#cell").val() + "-";
$("#cell").val(cellValue);
}
});
Demo --> http://jsfiddle.net/KZmc9/2/
Try
$(document).ready(function(){
$("#cell").keypress(function(){
if (this.value.length == 3) {
$("#cell").val(this.value + "-");
}
});
});
Demo: Fiddle
I would split the input into two, because otherwise users have to delete the dash if they want to delete the 3rd number.
http://jsfiddle.net/TATnK/
$(document).ready(function() {
$('#cell_1').on('input', function(e) {
if($(this).val().length == 3) {
$('#cell_2').focus();
}
});
$('#cell_2').keyup(function(e) {
if(e.which == 8 && $(this).val().length == 0) {
$('#cell_1').focus();
}
});
});

Categories

Resources