How can i change the textbox value on pressing space? - javascript

I want to change the English words into Hindi
every time I press space in textbox its a keypress event but how to apply only for space key.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#textboxid').keypress(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 32) { //space keycode
//Do language transilation here
}
});
});
</script>
<form id="form1" name="form1">
<input type="text" name="textfield" id="textboxid" />
</form>

Space is 32. So using jQuery keypress event you can do it with:
$("textarea").on("keypress", function(e) {
if (e.keyCode == 32) {
// ...
}
});

For a vanilla js answer:
document.getElementById( 'textboxid' ).onkeypress = function( e ) {
if ( e.keyCode === 32 ) {
// Translate into Hindi
}
}

Related

Operation in every browser the same way

I have problem. This code works well only in Google Chrome. I need it to work well in any other browser. Does anyone know how to do it and help me? I need the code to work well in firefox. Because when you open a script in the Firefox browser, the key (TAB) is detected as a letter. and I can not freely switch between columns
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript" ></script>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" >
function preventNonNumericalInput(e){var n=void 0===(e=e||window.event).which?e.keyCode:e.which;String.fromCharCode(n).match(/^[0-9,\b,-]+$/)||(alert("WPISZ LICZBĘ"),e.preventDefault())}!function(n){n.fn.average=function(){var e=0;return this.each(function(){e+=parseFloat(n(this).val())}),e/n(this).length}}(jQuery),$(document).ready(function(){$(":reset")}),$(document).ready(function(){$("#calc").click(function(){var e=$("input[type='number']").average();console.debug(e),$("#result").html(e)}),$(".reset").on("click",function(){$("#result").html(" ")})});
</script>
<h1>Oblicz średnią:</h1>
<form action="">
<input onkeypress="preventNonNumericalInput(event)" type="number">
<input onkeypress="preventNonNumericalInput(event)" type="number">
<input onkeypress="preventNonNumericalInput(event)" type="number">
<div id="result" type="reset" ></div><br>
<input type="button" id="calc" value="Licz">
<input type="reset" value="Reset" class="reset">
</form>
</body>
</html>
So, you've put a bit of Javascript to disallow the user to use anything else than numerical inputs into the form, right ? Hence pressing any other key than the 0-9 one while in the input launch your alert : "WPISZ LICZBĘ".
First of all, you want to "unminify" your unreadable Javascript line.
function preventNonNumericalInput(e) {
var n = void 0 === (e = e || window.event).which ? e.keyCode : e.which;
String.fromCharCode(n).match(/^[0-9,\b,-]+$/) || (alert("WPISZ LICZBĘ"), e.preventDefault())
}! function(n) {
n.fn.average = function() {
var e = 0;
return this.each(function() {
e += parseFloat(n(this).val())
}), e / n(this).length
}
}(jQuery), $(document).ready(function() {
$(":reset")
}), $(document).ready(function() {
$("#calc").click(function() {
var e = $("input[type='number']").average();
console.debug(e), $("#result").html(e)
}), $(".reset").on("click", function() {
$("#result").html(" ")
})
});
This line :
String.fromCharCode(n).match(/^[0-9,\b,-]+$/) || (alert("WPISZ LICZBĘ"), e.preventDefault())
Reads the input and sees if it is a number (0-9) or an hyphen. If you add || e.keyCode == 9 it lets you use the tab button.
String.fromCharCode(n).match(/^[0-9,\b,-]+$/) || e.keyCode == 9|| (alert("WPISZ LICZBĘ"), e.preventDefault())
But you'll still have problem, like in Chrome you can use up and down arrows to increase or decrease the amount, while in Firefox this gives you an error.
Try this
function preventNonNumericalInput(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
JSFiddle for reference

How to alert user that input type text detects a dot when user input?

I have this html and jquery code that alerts the user to have numbers only to input.
I want to alert the user when user inputs a dot '.' in the text field.
<html>
<body>
<div class="form-group" id="parentID">
<input class="form-control" placeholder="ID Number (10 max numbers)" id="childID" name="idnumber" type="text" maxlength="10" required autofocus>
<span id="checkID"></span>
</div>
</body>
<script>
var ID = $("#childID").val();
if (ID.indexOf(".") != -1) {
$("#checkID").html("ID number must contain numbers only");
$("#checkID").css("color", "orange");
}
$(document).ready(function() {
$("#childID").keyup(checkPasswordMatch);
});
//In this function it will disable special characters in user input but still accepts the '.' and '>' character type, what keycode is it to disable that 2 character?
$(function() {
$('#parentID').on('keydown', '#childID', function(e) {-1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault() });
})
</script>
</html>
I want the span id="checkID" to appear when the input field detects a dot on keyup. I tried using indexOf() but the span tag won't appear. Can anyone help me?
I have updated your code in fiddle. Please find the updated code in below fiddle link. Just added one function and updated keyup and keypress events.
$(function() {
$('#parentID').on('keypress keyup', '#childID', function(e) {
if(isNumber(e)){
$("#checkID").html("");
} else{
//e.preventDefault();
$("#checkID").html("ID number must contain numbers only");
$("#checkID").css("color", "orange");
}
});
});
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode <= 46 || charCode > 57)) {
return false;
}
return true;
}
See the Demo
It shows the error message. If you don't want to allow other characters please uncomment //e.preventDefault();
try this this check it real time
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
first name :<input type="text" name="firstname" class="tfield" id="myinput">
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#myinput").on('change keyup keydown',function(){
var thetext = $(this).val();
if (thetext.indexOf('.') != -1)
{
alert("contains dot sign")
}
else
{
//no need
}
});
});
</script>
$("#childID").keyup(function(){
if ($("#childID").val().indexOf('.') > -1) {
alert('dot');
}
});
Working Demo 1
Working Demo 2
Just write one javascript function which will check the charCode. The keyCode for dot is 46. so javascript function may like this
$('#childID').keypress(function (e) {
//if the letter is dot
if (e.which == 46) {
//display alert error message
alert("you cant enter dot");
$(this).focus();
return false;
}
});
This will not let the user type dot in the text field.
Demo:
<!DOCTYPE html>
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
Enter text :<input type="text" name="childID" id="childID">
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#childID').keypress(function (e) {
//if the letter is dot
if (e.which == 46) {
//display alert error message
alert("you cant enter dot");
$(this).focus();
return false;
}
});
});
</script>

Ng-keypress prevent default for specific charCode

I have an input that is type="number". I want to prevent the user from typing decimals, addition, subtraction, or e into the input. Currently I am trying to e.preventDefault() on ng-keypress to disable the key completely. But it is not working. I am using typescript and angularJs. It is seeing the event on keypress but it is not preventing the entry from being made. Or, would using ng-pattern with a regex be an alternative option retrict input to 0-9?
setCapacityType(e) {
let keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode < 48 && keyCode > 57) {
e.preventDefault();
console.log("xx");
}
}
<input type="number" ng-keydown="vm.setCapacityType($event)"
autocomplete="off" autocorrect="off" spellcheck="false">
Well, two things:
First, you have to instantiate your function:
vm.setCapacityType = function(e) {
To allows only numbers [0-9] you should write your condition as below:
if (keyCode < 48 || keyCode > 57) {
Now, you can have something like this:
angular.module('app', [])
.controller('mainCtrl', function() {
var vm = this;
vm.setCapacityType = function(e) {
let keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode < 48 || keyCode > 57) {
console.log("Prevent!");
e.preventDefault();
}
}
});
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl as main">
<input type="text" ng-keydown="main.setCapacityType($event)" autocomplete="off" autocorrect="off" spellcheck="false">
</body>
</html>
ng-pattern with a regex be an alternative option retrict input to 0-9?
No, ngPattern directive doesn't prevent/restrict the input.

Why isn't the value being printed?

Here's the short code:
<!DOCTYPE html>
<script type="text/javascript">
function myKeyPress(e)
{
var keynum;
var list;
if(window.event)
{
keynum = e.keyCode;
list = keynum;
if(list == 115)
{
alert("You pressed the 'S' key.");
}
}
}
</script>
<form>
<input type="text" onkeypress="myKeyPress(event);"/>
</form>
When I hit a key, myKeyPress should be called and the event should be passed to the function. In the function body, e (the event parameter) should fetch the Keynum and obtain the input value. That value should be 115 if I were to press 'S' on the keyboard. List should then have the value of Keynum, and list is checked to see if its value is equal to 115 (it should be). If so, it should alert the corresponding text in a message box on the screen. It doesn't do it though. Why?
Here is a shortened version of your code:
function myKeyPress(e) {
var keynum = e.which ? e.which : e.keyCode;
alert(keynum); // Just to see all key presses, remove when done :)
if (keynum == 115) {
alert("You pressed the 'S' key.");
}
}
I am binding it using JavaScript not using an HTML attribute:
document.getElementById('example').onkeypress = myKeyPress;
So I added an ID:
<input type="text" id="example" />
I find that this works. I'm not sure why you were testing window.event in your code?
s key is nr 83 and not 115.
you could find out like this with jQuery.
<script type="text/javascript">
$('#myinput').on('keyup',function(e){
console.log(e.keyCode);
});
</script>
<input type="text" id="myinput" />

Execute function by pressing "return" using jQuery?

i have two text inputs like the following, i don't want to use <form> , so i want when people press "return" BUTTON after filling the inputs, a function called "doit()" should be executed.
<script>
function doit(){
alert("you submitted the info");
..........ajax code........
}
</script>
<input type="text" id="email" />
<input type="text" id="skills" />
Thanks
The following will do what you are looking for.
$('#emails, #skills').keypress(function(e){
if( e.keyCode == $.keyCode.ENTER || e.keyCode == $.keyCode.NUMPAD_ENTER ){
yourSubroutine();
}
});
$('#name, #last').bind('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 108) {
doit();
}
});
KeyCode can be found here
Check out this question. Essentially, you'll want to bind a keypress listener, and then check for the return key.

Categories