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
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
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');
});
});
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');
});
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");
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>