How do i restrict user to enter any data from Keyboard to Text-box. Actually my requirement is that, this particular textbox is being used for only scanning purpose. Hence, only scanned data will be entered to this textbox and want to restrict any manually entered data from keyboard.
Just disable the textbox and get the value from the backend will solve the issue.
SAMPLE FIDDLE
I dont think there is any need of javascript here.
Just use readonly in you html.
<input value="somevalue" name="meow" readonly>
Thats it.No fancy javascript needed.
Try this
$(function(){
$('input[type=text]').bind('keyup keydown keypress', function (evt) {
return false;
});
});
Demo
If you want to fill data from backend then you can permanently disable
for that you just need to add in textbox html readonly and then fill value by
document.getElementById("yourtextbox_id").value="your_scanned_value";
Related
When i click on a textfield, i get a dropdown so the user could select a value from the list.
After the user selects the date from the dropdown, he/she could edit the date by even adding characters to it. So i want to find a way to prevent this. I thought of making the field un-editable. So i used readonly but, this prevents the user from clicking and displaying the list. So can someone tell me how can i make the field uneditable.
<input id="datePiccc" type="text" class="dates" />
You can use the below code. This will make the text input field clickable but when the user types in anything, nothing would happen.
document.getElementById('datePiccc').onkeydown = function(e){
e.preventDefault();
}
Fiddle Demo
As pointed out by nnnnnn, onkeydown is a better option than onkeypress as it would stop the delete and backspace key functions.
You could add the below also to your code to nullify Cut and Paste events1. (Note: Not doing anything for Copy as that operation isn't going to change the value of the text field).
document.getElementById('datePiccc').oncut = function(e){
e.preventDefault();
}
document.getElementById('datePiccc').onpaste = function(e){
e.preventDefault();
}
1 I think these should work in all browsers. Currently tested in Chrome 31, Opera 15, IE10 and FireFox 24. (Note: In IE10, there is an x mark which appears on the right side of the input field which when clicked clears the entire field value. Could not find a way around this.)
I'm assuming the text field is being set in javascript. If so, you can use the following line to disable the field:
document.getElementById('datePiccc').disabled=true;
The input will remain as it is and the value from the selection field can also be set.
Disable the input in JQuery as
$("#datePiccc").attr("disabled", true);
And in pure JS
document.getElementById('datePiccc').disabled = true;
May be this can help!
I want to validate an ASP.TextBox for entering only Integer Value with javascript function. In case of non-Integer value entered by a user, it should displays a warning message and keeps the focus on current element. I used the following procedure:
On Web Page’s Asp.TextBox element:
onchange="return isInteger(this);" onblur="return isInteger(this);"
And valdating function in functions.js file
function isInteger(mobj) {
var mval = mobj.value;
if (isNaN(parseInt(mval))) {
alert("Plese Enter a Valid Integer...!");
mobj.focus();
return false;
}
return true;
}
Is it correct, or is there any correct way to do the validation. Kindly suggest.
Yes idea is correct. Thats how you have to validate your textbox.
Validating a text box value using javascript
http://social.msdn.microsoft.com/Forums/en-US/netfxjscript/thread/07a91c1d-34db-44d8-9bd6-a424394a7028/
Or there is another way using onKeyUp() on text box, check the value of textbox, and return false if input is not an integer.
You can use ASP.NET RegularExpressionValidator Control for validating your text box input value.
Eg.
<asp:TextBox id="textbox1" runat="server" />
<asp:RegularExpressionValidator
ControlToValidate="textbox1"
ValidationExpression="\d{1,10}"
ErrorMessage="Plese Enter a Valid Integer...!"
runat="server" />
The idea is correct but onchange is enough. onblur is not necessary because you don't want to validate each time the control lost focus(i.e. tab through or just click) without having any change.
onblur is enough for validation here..
Using onchange and onblur together will create two alerts sometimes i.e when focus is lost and onchange fires together...
Try here...
If you use onchange alone, you will get alert only first time you lose the focus when you keep text unchanged ..like here... or else your have to clear textbox value if it is invalid...
onkeyup can be a best alternative but still you may need to clear textbox value like here...
I am working in Javascript. I am trying to make a function on the keypress event. I want to make function for validation on mobile number. I want to allow only digits in it. I also want to allow ctrl+v and ctrl+a in this but I dont want to allow V and A as characters.
I have seen many answers here but no one is purely same.
If you only care that digits are entered, as it seems from your question, this Jquery code will work.
It uses on keyup() and thus it will work on ctrl+v as well. It won't work if someone uses right-click to paste, and for that reason, you can just disable right clicking on that field.
It works by stripping off the last character of the input value if it is not a number. So if a user enters 25s or 25ss, it will get stripped down to 25.
Live Demo
The Jquery
$(document).ready(function(){
$('#number').keyup(function(){
var input = this.value;
while (isNaN(input))
{
input = input.substring(0,input.length-1);
$('#number').val(input);
}
});
//disable right click on the field
$('#number').bind("contextmenu",function(e){
return false;
});
});
You can use HTML5 input tags which use the pattern attribute.
<form>
<input name="name" value="" pattern="\d+" required/>
<input type="submit"/>
</form>
I'm trying to update a span tag on the fly with data from an input text field. Basically I have a text field and I'd like to be able to grab the user's input as they type it and show it to them in a span tag below the field.
Code:
<input id="profileurl" type="text">
<p class="url">http://www.randomsite.com/<span id="url-displayname">username</span></p>
JQuery:
var username;
$('#profileurl').keyup(function(username);
$("#url-displayname").html(username);
See it in JS Fiddle: http://jsfiddle.net/pQ3j9/
I'm guessing the keyup function is not the best way to do this. Since checking the key wouldn't be able to grab prefilled or pasted form input.
Ideally there is some magical jQuery function that can just output whatever info is in the box whenever it detects a key up but if that method exists I haven't found it yet.
EDIT: You guys are fricken amazing. It looks like .val() is that magic method.
Second question: How would you restrict input? Looking at the modified jsfiddle's, when a user inputs an html tag like < hr > the browser interprets it and breaks the form. Do you specify an array and then check against that? Does jquery have anything like PHP's strip_tags function?
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
}).keypress(function(e) {
return /[a-z0-9.-]/i.test(String.fromCharCode(e.which));
});
check out the modified jsfiddle:
http://jsfiddle.net/roberkules/pQ3j9/5/
Update: As #GregL points out, keyup indeed is better, (otherwise e.g. backspaces are not handled at all).
Similar to roberkules' answer, but using keyup() like you proposed seems to work better for me in a Chrome-based browser:
$('#profileurl').keyup(function(e) {
$("#url-displayname").html($(this).val());
});
Updated jsFiddle: http://jsfiddle.net/pQ3j9/3/
For the second question, if you wish to maintain characters and not have them parsed as html entities then you should do this instead :
$('#profileurl').keyup(function(key) {
$("#url-displayname").text($(this).val());
});
Check it out at - http://jsfiddle.net/dhruvasagar/pQ3j9/6/
You can bind multiple events with bind
http://jsfiddle.net/dwick/DszV9/
I need to have an input box in a div without a form and when the user enters something and hits return, it should run a Javascript function.
There will be no submit button.
How can I do this?
To get an input box without a form, I would suggest just not using a form.
You will have to attach a onkeypress event and check if enter was pressed (and rune the code if it was). Tell us if you are using plain JavaScript or some library if you need examples.
It can be simply done with the help of a form as follow... i think adding form would provide great stability
<form onSubmit='alerttest(this); return false'>
<input type="text">
</form>
<script language="javascript">
function alerttest() {
alert("Executing jolly.exe !!!!");
}
</script>
Don't use the form tag. You can easily use JQuery to tie the code to the input control's key press events.
If you are unfamiliar with JQuery, just tie the code directly to the input field key press event.
To run a function when the user presses enter when focused on the input field, the easiest way would be to have the form tag and run the function using the form's onSubmit event (because pressing return when focused on an input field submits the form).
If you nevertheless don't want to include the form tag, you can use the onKeyPress event to catch the return key pressing and call the function from there.