Javascript not functioning in firefox [duplicate] - javascript

jQuery keypress event for FireFox gives encrypted keyCode property for event object
after String.fromCharCode(e.keyCode) conversion but works perfect in Chrome.
Following is the javascript code:
<!-- #booter and #text are ids of html element textarea -->
<script type="text/javascript">
$(function(){
$('#booter').keypress(function(e){
var input = $(this).val() + String.fromCharCode(e.keyCode);
$('#text').focus().val(input);
return false;
});
});
</script>

You should use e.charCode in Firefox.
$("#booter").keypress(function(e){
var code = e.charCode || e.keyCode;
var input = $(this).val() + String.fromCharCode(code);
$('#text').focus().val(input);
return false;
});
Try it here:
http://jsfiddle.net/REJ4t/
PS
If you're wondering why all this mess: http://www.quirksmode.org/js/keys.html

It works for both IE & FF.
$(document).ready(function (){
$('#txtEntry').keypress(function (e) {
$('#lnkValidEdit').focus();
return false;
});

Related

How to autorun JS on HTML load

I have the following code which is designed to capture keyboard input after the page loads. However, I'm having a problem getting the code to autorun on my website page. I've looked through other documentation and they recommend using:
window.onload = function keyboard(e)
...this is not working for me. Any help is appreciated.
<head>
<script src="jquery-3.4.1.min.js"></script>
window.onload = keyboard;
</head>
<script>
// On enter show popup with text entered
var chr = '';
$(document).on('keyup', function keyboard(e) {
chr += String.fromCharCode(e.keyCode);
console.log(chr);
$('input:hidden').val(chr);
if (e.keyCode === 13) {
alert(chr);
}
});
</script>
There's a few tricks here. All of the JavaScript code needs to be inside a script tag, and while you could use window.onload if you are using jQuery, you might as well use their .ready() function.
<head>
<script src="jquery-3.4.1.min.js"></script>
<script>
//since you have jQuery, you can define your code to run when the page is ready
$(document).ready(function(){
// On enter show popup with text entered
var chr = '';
$(document).on('keyup', function keyboard(e) {
chr += String.fromCharCode(e.keyCode);
console.log(chr);
$('input:hidden').val(chr);
if (e.keyCode === 13) {
alert(chr);
}
});
});
</script>
</head>
What is the problem?
var chr = '';
$(document).on('keyup', function keyboard(e) {
chr += String.fromCharCode(e.keyCode);
console.log(chr);
$('input:hidden').val(chr);
if (e.keyCode === 13) {
alert(chr);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The problem was with jQuery. I must have not been using the right one. Below is the correction which works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// On enter show popup with text entered
var chr = '';
$(document).on('keyup', function test(e) {
chr += String.fromCharCode(e.keyCode);
if (e.keyCode === 13) {
alert(chr);
}
});
</script>

backspace is not working in firefox for input when validation is applied

I have written one function for the input validation using jquery which only allow to type characters and numbers. This is working fine in the chrome browser but when i am testing it in the firefox browser the backspace is not working...below is my function for the same.
noSpecialCharacther= function(fieldId) {
$('#' + fieldId).bind('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9 .()-]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
Please help me out with this. Thanks in advance.
You can add [\b] the character class to match backspace.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes
var noSpecialCharacther = function (fieldId) {
$('#' + fieldId).on('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9 .\b()-]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
})
}
noSpecialCharacther('test')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test">

Stopping enter key submitting also stops enter key in multi line text edit

There are lots of solutions on the web for stopping the enter key from submitting a form. Most commonly to use <body onkeypress = ...
But these seem to have the undesired side effect of stopping the enter key working in a multi-line text box. Does anyone know of a way around this, so the enter key will still work in a multi-line text box?
Thanks,
AJ
<script language="Javascript">
document.onkeydown = function() {
if (event.keyCode == 13) {
if (document.activeElement.tagName.toLowerCase () != "textarea") {
event.preventDefault();
return false;
}
}
}
</script>
Something like this?
You can try the following (with jquery):
$(function(){
$('input:not(textarea)').live('keypress', function(e) {
if (e.which == 13) return false;
if (e.which == 13) e.preventDefault();
});
});
Only input fields are targeted, not textareas.
NON JQUERY
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode;
else
key = e.which;
return (key != 13);
}
And add onKeyPress on all text inputs
<input type="text" name="textIn" onKeyPress="return disableEnterKey(event)"/>
Ref : http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

How can I capture keyboard events are from which keys?

I googled and got the following codes on the Net.However, when I press a keyboard key,it is not displaying me an alert box. I want to get which character I have pressed in the alert box. How do I fix this?
<script type="text/javascript">
var charfield=document.getElementById("char")
charfield.onkeydown=function(e){
var e=window.event || e;
alert(e.keyCode);
}
</script>
</head>
<body id="char">
</body>
</html>
If you want to get the character typed, you must use the keypress event rather than the keydown event. Something like the following:
var charfield = document.getElementById("char");
charfield.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode > 0) {
alert("Typed character: " + String.fromCharCode(charCode));
}
};
try this jquery code
$("body").keypress(function(e){
alert(e.which);
});
I can't off the top of my head think of a good situation in which to use the "on some event" method of a DOM element to deal with events on that element.
The best practice is to use addEventListener (or attachEvent in older versions of Internet Explorer) like so:
charfield.addEventListener('keydown', function (e) { alert(e.keyCode); }, false);
If you want to account for attachEvent as well:
(function (useListen) {
if (useListen) {
charfield.addEventListener('keydown', alertKeyCode, false);
} else {
charfield.attachEvent('onkeydown', alertKeyCode);
}
})(charfield.addEventListener);
function alertKeyCode(e) {
alert(e.keyCode);
}
You'll get the appropriate key code:
charfield.onkeydown=function(evt){
var keyCode = (evt.which?evt.which:(evt.keyCode?evt.keyCode:0))
alert(keyCode);
}

How to disable Paste (Ctrl+V) with jQuery?

How can I disable Paste (Ctrl+V) option using jQuery in one of my input text fields?
This now works for IE FF Chrome properly... I have not tested for other browsers though
$(document).ready(function(){
$('#txtInput').on("cut copy paste",function(e) {
e.preventDefault();
});
});
Edit: As pointed out by webeno, .bind() is deprecated hence it is recommended to use .on() instead.
Edit: It's almost 6 years later, looking at this now I wouldn't recommend this solution. The accepted answer is definitely much better. Go with that!
This seems to work.
You can listen to keyboard events with jQuery and prevent the event from completing if its the key combo you are looking for.
Note, check 118 and 86 (V and v)
Working example here:
http://jsfiddle.net/dannylane/9pRsx/4/
$(document).ready(function(){
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '118' || event.which == '86')) {
alert('thou. shalt. not. PASTE!');
event.preventDefault();
}
});
});
Update:
keypress doesn't fire in IE, use keydown instead.
As of JQuery 1.7 you might want to use the on method instead
$(function(){
$(document).on("cut copy paste","#txtInput",function(e) {
e.preventDefault();
});
});
jQuery('input.disablePaste').keydown(function(event) {
var forbiddenKeys = new Array('c', 'x', 'v');
var keyCode = (event.keyCode) ? event.keyCode : event.which;
var isCtrl;
isCtrl = event.ctrlKey
if (isCtrl) {
for (i = 0; i < forbiddenKeys.length; i++) {
if (forbiddenKeys[i] == String.fromCharCode(keyCode).toLowerCase()) {
return false;
}
}
}
return true;
});
I tried this in my Angular project and it worked fine without jQuery.
<input type='text' ng-paste='preventPaste($event)'>
And in script part:
$scope.preventPaste = function(e){
e.preventDefault();
return false;
};
In non angular project, use 'onPaste' instead of 'ng-paste' and 'event' instesd of '$event'.
The following code will disable cut, copy and paste from full page.
$(document).ready(function () {
$('body').bind('cut copy paste', function (e) {
e.preventDefault();
});
});
The full tutorial and working demo can be found from here - Disable cut, copy and paste using jQuery
$(document).ready(function(){
$('#txtInput').on("cut copy paste",function(e) {
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtInput" />
You can catch key event :
function checkEventObj ( _event_ ){
// --- IE explorer
if ( window.event )
return window.event;
// --- Netscape and other explorers
else
return _event_;
}
document.keydown = function(_event) {
var e = checkEventObject(_event);
if( e.ctrlKey && (e.keyCode == 86) )
window.clipboardData.clearData();
}
Not tested but, could help.
Source from comentcamarche and Zakaria
$(document).ready(function(){
$('#txtInput').live("cut copy paste",function(e) {
e.preventDefault();
});
});
On textbox live event cut, copy, paste event is prevented and it works well.
I have tested the issue on chrome browser and it is working for me.Below is a solution for preventing the paste code in your textbox and also prevent the right click.
$(".element-container").find('input[type="text"]').live("contextmenu paste", function (e) {
e.preventDefault();
});
$(document).ready(function(){
$('input').on("cut copy paste",function(e) {
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />

Categories