So frustrated with my issue, totally over my head trying to add a small feature to my site. I don't really know what I'm doing and I'm trying to use the HTML input range, with a text box that labels the value of the slider.
So I have this so far...
<input id="Slider" type="range" min="0" max="2" value="2" />
<p class="note">Current value: <span id="currentValue">0</span></p>
<script>
$(function(){
var currentValue = $('#currentValue');
$('#Slider').change(function(){
currentValue.html(this.value);
});
$('#Slider').change();
});
</script>
It works fine, sometimes it doesn't always update the number, but outputs the numbers 0, 1, and 2.
I need to know how to convert 0 to a word, like... apple, 1 to orange, and 2 to banana, or whatever I wish the words to be.
Thank you for any help you can provide. Also, if there is a better / more efficient way to accomplish this that would be nice as well, thank you.
You would use an array to and .html() to change the text (how #Ian commented).
An improved version of the slider with the word changing:
HTML
<p id="word">Number 0 has been chosen</p>
<input type="range" id="Slider" type="range" min="0" max="2" value="0">
JS/JQuery
var n = ["Number 0 has been chosen", "Number 1 has been chosen", "Number 2 has been chosen"];
$('#Slider').on('change', function(){
$('#word').html(n[this.value]);
});
JSFiddle
Related
I have this short example
<input value="2" min="0.1" max="1000" type="number" />
The input with: min=0.1 max=1000 value=2 step=1
The problem is: If I click on up arrow (pseudo-element for number type=number) - the input value becames 2.1 and then 3.1
WHY does it add 0.1 on the first click? And if you change 3.1 to 3 and click up arrow you still see 3.1 and 4.1 on the second click
Adding step attribute solves the problem
<input value="2" min="0.1" max="1000" step="0.1" type="number" />
You can use js like below.
$(this).off('input').on('input',function(e){
var value = $(this).val();
var regExp = /^\d{0,10}(\.\d{0,1})?$/;
if(!regExp.test(this.value)){
$(this).val(value.substring(0,value.length-1));
}
});
You can also control length of input or max/min for float. Don't forget to change this to your input tag name. Good luck! :)
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"});
}
I am trying to learn jquery. I have two text fields. When the length of the first field becomes 3 i need the cursor to move to the next text box. How can i accomplish it? Please help me to find the answer
<input id="phone_field1" maxlength="3" name="phone_1" type="text">
<input id="phone_field2" maxlength="3" name="phone_1" type="text">
My code is given here. Please help me.
Do like below:
$('#phone_field1').on('input',function(){//or keyup,you can use input rather id
if($(this).val().length == $(this).prop('maxlength')){
$(this).next().focus();
}
});
Add missing bracket.
I've seen those draggable settings bars for random things, but I can't seem to remember what they were called, and thus am having a hard time to search it up on google.
It was one of those bars where if you dragged to the right, the value increases and if you dragged it to the left, the value decreases.
What's the easiest way to create one of these in html/css/js?
What you are looking for is called a range and is an input element:
<input type="range" min="1" max="10">
To get the out put you could use JavaScript and <output>:
<form oninput="x.value=parseInt(a.value)">
<input type="range" id="a" value="50">
<output name="x" for="a b"></output>
</form>
JSFiddle Example
I want to have an input field which only allows to type whole numbers or .5 decimal numbers. e.g. 0, 0.5, 1, 1.5, 2, 2.5.......etc etc
I am trying to do this with a HTML5 input field as so
<input type="number" min="0" max="18" step="0.5" pattern="\d+" />
but it won't validate the number when it is on a half step of 0.5. It just stays red when clicking outside / validating.
Is this possible? I can't find similar example of how to validate for half steps. DO I need to use jQuery to achieve this?
Thanks
Fiddle Demo http://jsfiddle.net/b8NrE/906/
Remove the pattern attribute. This is used for complex validation that requires regular expressions (and your regular expression is only matching sequences of digits). As it is, stipulating min, max, and step already define all the validation that you need:
<input type="number" min="0" max="18" step="0.5" />
http://jsfiddle.net/b8NrE/907/
You can try this: It will clear text box if step is not .5
<input type="number" min="0" oninput="validity.valid||(value='');" step="0.5" />