I want to have a text placeholder for a currency input field using Input mask.
When the input value is empty, I want to display "Other" but as soon as the user begins typing it should mask the input to US dollars.
$(function() {
$('#otheramount').inputmask({
alias: 'currency',
digits: 2,
rightAlign: 0
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask#3.3/dist/jquery.inputmask.bundle.js"></script>
<input id="otheramount" placeholder="Other" name="otheramount" data-_extension-text-contrast="" type="text">
The placeholder option is for masked input characters not for when the value of the input is empty.
Use the clearMaskOnLostFocus option
$(function() {
$('#otheramount').inputmask({
alias: 'currency',
digits: 2,
rightAlign: 0,
clearMaskOnLostFocus: true
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask#3.3/dist/jquery.inputmask.bundle.js"></script>
<input id="otheramount" placeholder="Other" name="otheramount" data-_extension-text-contrast="" type="text">
Related
I'm writing a fun little project to build up my HTML/JS skills. I'm using Handlebars to render some forms, and I hit something I can't seem to get around.
I've registered this as a partial template named 'checkbox':
<label>
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true">
{{labelText}}
</label>
That did me well when I was making forms to add data, but now I'm making forms to edit data, so I want to make the checkbox checked if the current item already is checked. I can't figure out how to make this work.
The first thing I tried was something like this:
<label>
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
checked="{{isChecked}}">
{{labelText}}
</label>
But if I pass that values like isChecked=true I get a checked box every time, because I guess for that kind of attribute in HTML being present at all means 'true'. OK.
So I tried using the if helper:
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
{{#if isChecked}}checked{{/if}}>
{{labelText}}
This sort of works. If I omit the isChecked property entirely, the box is unchecked. If I hard-code a true or false value like this, it works:
{{> checkbox id="test" labelText="test" isChecked=true }}
But I can't seem to get what I want with a value there. For example, if I try:
{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}
It seems like the condition isn't properly being resolved because I always get the attribute in that case.
What am I missing? I feel like there should be a way to do this, but I'm running out of tricks.
You cannot put an expression inside of another expression:
{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}
From examples you wrote I assume the problem you are having is related to how you pass the context - id and labelText are hardcoded while isChecked is expected to be a variable of some sort. In reality all those should be variables. Consider the following example - HTML:
<div id="content"></div>
<script id="parent-template" type="text/x-handlebars-template">
{{#each checkboxes}}
{{> checkbox this }}<br>
{{/each}}
</script>
<script id="partial-template" type="text/x-handlebars-template">
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
{{#if isChecked}}checked{{/if}}>
{{labelText}}
</script>
JS:
var parentTemplate = Handlebars.compile($("#parent-template").html());
Handlebars.registerPartial({
checkbox: Handlebars.compile($("#partial-template").html())
});
$('#content').html(parentTemplate(
{checkboxes: [
{id: 1, labelText: "test 1", isChecked: true},
{id: 2, labelText: "test 2", isChecked: false},
]}
));
I have a (unchangable) form structure like this:
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="frm-registrationForm-form-surname">Surname:</label>
</div>
<div class="col-sm-9">
<input class="form-control text" id="registration-form-surname" type="text" name="surname" required>
</div>
</div>
Is there possible to add the asterisk * sign next to all the labels relying to the inputs with "required" attribute using the CSS? I did not find any option to link the input with the label in CSS even in the same form group.
Thanks.
Using jQuery.
First solution. If .form-group has only one input and label elements.
$(document).ready(function () {
$('input[required]').parents('.form-group').find('label').append('*');
});
Second solution. Working only of your label for and input id attributes the same
$(document).ready(function () {
$("input[required]").each(function(index) {
var id = $(this).attr('id');
$('label[for="'+id+'"]').append('*');
});
});
I would recommend you to use the second solution.
You can use jQuery to implement this functionality. Inside document.ready function,
var str ='*';
$(".control-label").append(str);
Entire script would be
$(document).ready(function () {
var str ='*';
$(".control-label").append(str);
});
I want to find the default tab index of the form.
I have not given but still all the control has the tab index. I want to find that default tab index through the j query. How can i find that?
Jquery and tab-index
The way tabindexing works is that it goes trough your html markup and looks for tabable elements.
So say you have this code:
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The text input will be tabbed first, and then the submit input.
Yes i know this how do it get the tabbing?
$(function() {
$firstinput = $("form").find("input")
console.log($firstinput.first()); //prints the first element thats an input.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
The code above will only work if you only have input elemtns and add not trickery to the markup like hiding your elements etc.
In the code below im using the jquery UI :focusable selector.
With this you should get the first tabbable element in your form
//:focus selector from jquery UI
$.extend($.expr[':'], {
focusable: function(element) {
var nodeName = element.nodeName.toLowerCase(),
tabIndex = $.attr(element, 'tabindex');
return (/input|select|textarea|button|object/.test(nodeName) ? !element.disabled : 'a' == nodeName || 'area' == nodeName ? element.href || !isNaN(tabIndex) : !isNaN(tabIndex))
// the element and all of its ancestors must be visible
// the browser may report that the area is hidden
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
}
});
//actual code
$(function() {
$form = $("form");
$first = $form.find(":focusable").first();
console.log($first);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label tab-index="0">Name:</label>
<input type="text" />
<br>
<input type="submit" />
</form>
You can search for 'tabindex' attribute with jquery.
var tabindexVal = $('selector').attr('tabindex');
I want to divide layout for some components and i used Ractive.components for it.
All data are correct in component and used in it (like id and color).
But variable for two-way binding don't used correct.
I have one javascript behavior and three html layouts, and two layout from them don't work.
JS behavior
var config = [
{id: 1, color: '#cc8'},
{id: 2, color: '#c88'},
{id: 4, color: '#8c8'},
{id: 8, color: '#8cc'}
];
var Panel = Ractive.extend({
el: document.body,
template: '#panel',
data: function() {
return {
config: config,
filters: [4,8]
};
},
components: {
switcher: function() {return 'Switcher';}
}
});
var Switcher = Ractive.extend({
template: '#switcher'
});
Ractive.components.Switcher = Switcher;
var panel = new Panel();
HTML layout 1 (doesn't work)
<script id="panel" type="text/ractive">
<h4>Doesn't work: {{filters}}</h4>
{{#each config}}
<switcher name="{{filters}}">
filter #{{id}}
</switcher><br/>
{{/each}}
<br/>
</script>
<script id="switcher" type="text/ractive">
<label
class="switcher"
style="color:{{color}};">
<input
type="checkbox"
value={{id}}
name={{name}}
class="switcher__input">{{>content}}
</label>
</script>
HTML layout 2 (doesn't work)
<script id="panel" type="text/ractive">
<h4>Doesn't work too ("~/"): {{filters}}</h4>
{{#each config}}
<switcher name="{{~/filters}}">
filter #{{id}}
</switcher><br/>
{{/each}}
<br/>
</script>
<script id="switcher" type="text/ractive">
<label
class="switcher"
style="color:{{color}};">
<input
type="checkbox"
value={{id}}
name={{name}}
class="switcher__input">{{>content}}
</label>
</script>
HTML layout 3 (work)
<script id="panel" type="text/ractive">
<h4>Work: {{filters}}</h4>
{{#each config}}
<label
class="switcher"
style="color:{{color}};">
<input
type="checkbox"
value={{id}}
name={{filters}}
class="switcher__input">
tags #{{id}}
</label><br/>
{{/each}}
</script>
And live demo
How to make right Ractive.component with two-way binding?
P.S. Sorry for my English..
I have an issue with the datetimepicker from bootstrap.
I have a table containing a list of items, and on each column, I have an input to make some search on each field from the items.
I have a field "creationDate" and I want to be able to search a date between two dates, so to take less space, i have an icon for this field which shows a div on ng-mouseenter which contains the 2 inputs with datetimepicker.
The code of this part is like this :
<td>
<img src="/assets/css/images/unroll-icon.png" ng-mouseenter="showSelectCreationDate()" />
<div class="selectCreationDate" id="selectCreationDate" ng-mouseleave="hideSelectCreationDate()">
Date min. :
<input type='text' data-date-format="DD/MM/YYYY" class="form-control" id='inputCreationDateMin' />
<br />Date max. :
<input type='text' data-date-format="DD/MM/YYYY" class="form-control" id='inputCreationDateMax' />
<script type="application/javascript">
$(function () {
$('#inputCreationDateMin').datetimepicker({
pickTime: false
});
});
$(function () {
$('#inputCreationDateMax').datetimepicker({
pickTime: false
});
});
</script>
</div>
</td>
The problem is that when I move my mouse in the datetimepicker popup, it is considered as a mouseleave from the div, so it disappears and I can't select the date.
Ok so the problem is that when you mouse over a id/class it hides your popup- try this:
$(document).on("mouseover", "#nameOfyourField", function (e) {
//Do whatever you want to do
});
Now if you click somewhere in the body of your web-page the popup will go away:
$(document).on("click", "body", function () {
$("#nameOfyourField").hide();
});
I hope this is what you're looking for: