Allow user only to change first digit - javascript

This is my fiddle http://jsfiddle.net/foucpgkL/
<input type="text" value=""/>
I need to have my textbox containing same value as given i.e 000 not 0
Also I have requirement to allow user to edit only first digit.i.e user should only input like 100,200,500 and not like 123,110 etc.
How can I achieve this using jquery.
I am using Angular Js so angular directive could be best option.

var elem="000";
$('input').val(elem);
$(".text").keyup(function(){
console.log($(this).val());
$(this).val($(this).val().substring(0,1)+"00");
});
Demo

jsfiddle
var elem='000';
$('input').val(elem);
$("input").on('change',function(){
$(this).val($(this).val().substring(0,1)+'00');
});

Try this:
<input type="text" value="" step="100" />
EDIT:
FIDDLE
My answer was not sufficent so I made a short fiddle.
HTML:
<input type="number" step="100" value="000" min="0" max="900" onchange="checkZero(this)">
JS:
function checkZero(input) {
if (!parseInt(input.value)){ // if value is not in format "000", is "0" or 0
input.value = "000";
}
}
Use ng-model and ng-change. I suggest wrapping it in a directive. Feel free to ask for a snippet if you need.

I would suggest Jquery Mask for this
<input type="text" id="myInput" />
jQuery(function($){
$("#myInput").mask("900",{placeholder:"000"});
}

Related

Formatting input while values are typed

I'm trying to format the values typed by the user in realtime, I'm doing this for some data types but the only one that I cannot make it work is with currency (number). Based on my other data types I'm trying to solve it with the following code:
<input type="number" onkeypress="return parseFloat(this.value).toFixed(2).toLocaleString() " />
<input type="number" onkeypress="something(this.value);" />
function something(val) {
return parseFloat(val).toFixed(2).toLocaleString();
}
function something(val) {
return parseFloat(val).toFixed(2).toLocaleString();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" onkeypress="return parseFloat(this.value).toFixed(2).toLocaleString() " />
<input type="number" onkeypress="something(this.value);" />
What I'm trying to is that for example: if my user is trying to type 25999.84125 change the input value to 25999.84 but, any of my code examples are working.
How can I solve this? I'll prefer to keep the event + function inside the input tag (example 1) but if the solution is writing a custom function it's okay. Also I'm open to use Regex.
For using changing the value real-time, don't return the data in the function, just set the value to the input !
Also you cannot do it exactly real-time with JS, you need to use onChange function like this:
function something(val, input) {
document.getElementById(`input${input}`).value = parseFloat(val).toFixed(2).toLocaleString();
}
<input id="input1" type="number" onChange="something(this.value, 1);" />
<input id="input2" type="number" onChange="something(this.value, 2);" />
finally, if you want to do it exactly real time, use Vue js

Jquery working in console but not in actual code for checkbox enable disable

I have created one checkbox on the click on which the date fields are enabled/disabled
this is my code for jquery:
$(document).ready(function() {
$("#mychechbox").click(function(){
$("#date_1").attr("disabled", !this.checked);
});
});
my html tags for same:
<input id="date_1" value="<?php echo $this->input->post('from'); ?>" name="from" class="form-control" type="date" placeholder=" From" disabled/>
<p class="pull-left" style="font-size:10px;">
From Date<br><br>Enable Date fiedls
<input type="checkbox" class="pull-left" id="mychechbox" name="mychechbox">
</p>
</div>
<div class="col-sm-2" >
<input id="date_2" value="<?php $to= $this->input->post('to');if($to){echo $to;}else{echo date('m/d/y'); } ?>" name="to" class="form-control" type="date" placeholder=" To" disabled/>
<p class="pull-left" style="font-size:10px;">End Date </p>
</div>
I am doing this in Codeigniter.
please suggest me some improvements if needed
Why use jQuery and start mixing HTML5 with a deprecated (not yet obsolete) framework like jQuery?
Example only HTML5 + Pure JS:
Enable/Disable input fields
and if you do wanna use jQuery
Don't use click cause than it will not work when checking/unchecking the checkbox when u use your keyboard.
Use the change event instead and verify the current state of the checkbox so whether it was checked or not.
Example:
$(document).ready(function() {
$("#mychechbox").change(function() {
$("#date_1").prop("disabled", !this.checked);
});
});
Also use prop instead of attr to add the disabled property on an input field. Also recommend to use #mycheckbox with a k instead of #mychechbox with an h just to make sure that other people don't mistake if they write correct English.
So finally after so many attempts I got the solution:
I was unaware that along with my checkbox icheck-helper class(which I had mentioned in one of the comments) is also being loaded automatically...
so I did this:
$('#mycheckbox').on('ifChanged', function(event) {
if(this.checked) {
// alert("yes");
$("#date_1").removeAttr("disabled");
$("#date_2").removeAttr("disabled");
}
else {
// alert("no");
$("#date_1").attr("disabled","disabled");
$("#date_2").attr("disabled","disabled");
}
});
thank you everyone for the answers
if Your need to enable and disable datepicker on the basis of checkbox is checked or not then, try below code:
$(document).ready(function() {
$("#mychechbox").click(function(){
$("#mychechbox").is(':checked') ? $('#mydate').datepicker('enable') : $('#mydate').datepicker('disable');
});
});

Default value in an input tag at a particular position

I don't know if this is possible or not and hence here's the part. Suppose I have an input tag like the following.
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
Now what I want is that the user should already see the '/' part, i.e when he types 1212, the textbox should become 12/12 automatically, can it be done if yes , how. Thanks in advance.
For an HTML/CSS-only approach, you could use two inputs, and style them with no borders on the inside edges:
<input type="text" maxlength="2">
<span> / </span>
<input type="text" maxlength="2">
With the input and span elements set to display: inline-block; and some styling of borders, this is a strong, semantic approach with no required Javascript.
Recently I found a plugin that looks nice and I think it does what you're after, so I'm sharing it with you: cleave.js
<input id="expiry" name="expiry" type="text" placeholder="MM/YY">
<script type="text/javascript">
$("#expiry").bind('keyup mouseup', function () {
if($('#expiry').val().length ==2){
$('#expiry').val($('#expiry').val()+'/');
}
});
</script>
check the fiddle
try to use jquery mask plugin :
$(document).ready(function(){
$('#expiry').mask('00/00');
});

How to create auto-input script based on agularJS?

I´m trying to implement a greaskemonkey script to make an auto-input, but I cannot find a way to do it.
What I have:
HTML form:
<form ng-submit="buy(quantity2)">
<input name="quantity" type="text" ng-model="my.quantity" style="width:30px" maxlength="2">
</form>
I simply don´t know how to input a value for the box, usually I would do
$("input[name='quantity']:first").val("1");
Unfortunately val doesn´t exists here. Need a help, thanks!
For your better understand i just give you a example how you can take your value.
HTML form:
<form ng-submit="buy(youravlue)">
<input name="quantity" id="quantity" type="text" ng-model="youravlue" style="width:30px" maxlength="2">
</form>
using ng-submit you can take your value this way.
$scope.buy=function(data){
console.log(data);
}
using ID you can take your value this way.
angular.element("#quantity").val();
In angularjs we have to find the element either by id or querySelector or querySelectorAll and wrap it over angular.element which will provide jqlite(lighter version of jquery)
Refer this https://docs.angularjs.org/api/ng/function/angular.element
angular.element(document.querySelector("input[name='quantity']")).val("1");

html & js text field data (DD-MM-YYYY) validation

In my form I have a text field in which user type date. Good habit tells me to not let user to put anything other then dgit and '-' symbol in the field. However i have a bit problem with implementing such feature. So far I Have a field which accept only digits. If user try to put in field letter, this letter is being removed. But the point is to create (DD-MM-YYYY)format so field have to accept '-' symbol. Here is my code:
<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"/>
i tried put |\- into regex but with no success. Can anyone point me where I am doing mistake?
use thie regex
/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/
you can also
**/^\d{4}-\d{2}-\d{2}$|[^\d-]|-\d{2}-\d*-/.test(input.value)**
HTML5 has another approach for you:
<input type="date" name="test3">
The browser is responsible for the formatting of the date presentation, though.
You can try something like
<input type="text" name="test3" placeholder='DD-MM-YYYY' onkeyup="if (/[^\d-]/g.test(this.value)) this.value = this.value.replace(/[^\d-]/g,'')" onchange="validate(this)"/>
function validate(el){
var regex = /^(0?[1-9]|[12][0-9]|3[01])-(0?[1-9]|1[012])-\d{4}$/;
if(!regex.test(el.value)){
alert('invalid date');
el.value = '';
}
}
Demo: Fiddle
You can do this with HTML5
see my jsfidle: http://jsfiddle.net/H7tMZ/2/
<form>
<input type="text" name="date" pattern="\d{1,2}-\d{1,2}-\d{4}" placeholder="dd-mm-jjjj"/>
<button type="submit"/>
</form>

Categories