We Keep Coding

How to add auto hyphens between numbers in HTML?

I created input field, when user enter numbers then add auto hyphens.
Format is:
34603-5358722-7
I am using HTML and Javascript
Please share soulution
Thanks

This example shows how to add hyphen - after every 5th letter. You can modify it and add hyphen according to your requirement
function formatData(elem) {
elem.value = elem.value.replace(/(\d{5})(\d{7})/, "$1-$2");
}
<input type='text' onkeyup='formatData(this)'>

Combining Int-tel-input with Input masking

I am having an issue combining Int-tel-input (Country code telephone number selector plugin) with input masking.
What I am trying to accomplish here is to allow a user to select a country code from the country dropdown provided by the Int-tel-input plugin and then apply a mask over that to ensure that the user conforms to the number format.
Here is my current implementation (coffeescript):
//When a country flag is clicked
$(document).on 'click', '.country', ->
//Get the country code
code = "+" + $(this).data('dial-code')
//Find the input
elem = $(this).parents(".intl-tel-input").find("input")
//Clear the input
$(elem).val("")
//Mask input with country code
$(elem).inputmask({
mask: (code)+"99 999-9999",
clearMaskOnLostFocus: false
});
//Clear masked input to ensure mask is clear
$(elem).val("")
The issue I am running into is that if the country code contains a 9 the masking plugin will replace that character in the country code with a masking space. Example:
I want the input to look like : +394 -_-____
The result I am getting looks like : +3_4 -_-___
Note: The above implementation works perfectly with country codes which do not contain a 9.
Any help is appreciated!

Control Cursor Location on Focus in Form Field

I have a form with 4 fields. I want the first of the four to have the autofocus and be the first the user fills out. But then, either by tab or mouse or whatever, when the user gets to second field, I want the cursor to end up at the end of the string to start. There is a pre-filled string in that field.
I'm using Django so I have a form widget controlling the attributes. I can get the string to show up and even get the cursor to the end, but this always causes autofocus as well on that second field. I haven't managed to get both.
Here is code I'm using so far:
Django
field = forms.URLField(
widget = forms.URLInput(
attrs = {
'placeholder': 'enter field',
# call to javascript function - this works
'onfocus': 'add_string("field_id", "string")',
}
)
)
JavaScript:
// add string to element
function add_string(id, string) {
var input = document.getElementById(id);
input.value = string;
}
I've played around with various JS scripts but to no avail. I then found setSelectionRange and played around with this like so:
input.setSelectionRange(7, 7)
Where 7 would be end of the particular "string" in the onfocus JavaScript function call, but I could't get this to work...
Finally, I played around with some jQuery that looked like this:
// focus after string, no highlight
$(document).ready(function() {
var $field = $("#field_id");
var old_val = $field.val();
$field.focus().val('').val(old_val);
});
But this did the same thing: brought initial focus to second field and brought cursor to the end.
Any idea how I can do this, get both autofocus on field one but get cursor to jump to end of pre-filled string of field two on it's focus? Might be a nice trick if I knew how to do it.

You're almost there, you just need to fire your code when your form field is focused, instead of on document ready. In my tests it was necessary to add a zero timeout, because otherwise the field value remains selected:
$(document).ready(function() {
var $field = $("#field_id");
$field.on('focus', function() {
setTimeout(function() {
var old_val = $field.val();
$field.val('').val(old_val);
}, 0);
});
});
JSFiddle demo

How to restrict the text field to enter only digits

I am trying to create a text field for entering dates that accepts only digits. If any one enter any other character, no need to display in the text field and the cursor need to remain in the same position(no need to move to the next character position). If the entered value is a number , then need to show in the text field and need to move the cursor to the next level.
So at last the text field contains only the numbers.
I am using the following code,
$("#date").keyup(function(event){
//var c=(event).keyCode;
var c= String.fromCharCode(event.keyCode);
var cval = $(this).val();
alert("Characters="+c);
if(isNumber(c))
$(this).val(cval+c);
}
Advanced Thanks,
VSoft

In HTML5 you can use input type as number.
You can do this:
$('#date').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
I think you need jQuery Input Mask Plugin

you should run your function only when Focus is on the requested text field

Create a jquery ui datepicker when a certain key is pressed from within a textarea

I'm looking to make to make an interactive textarea, where when a user is typing in a textarea, if he types the character "$", a datepicker is created from which he can select a date which will be included inside the textarea afterwards.
Here is a jsfiddle to play around, but I can't seem to making it work.
http://jsfiddle.net/WAzpJ/6/
Any help appreciated, thanks.

This is a simple exmaple I've wrote:
$('#status_input').keyup(function(){
txt = $(this);
if( txt.val().indexOf('$') >= 0 ) {
$('.datepick').datepicker({
onSelect: function(theDate) {
txt.val(txt.val().replace(/\$/, theDate));
$(this).hide();
}
}).show();
}
});
What is basically does is: onkeyup checks whether there is $ characters inside the textarea and if there are - show the datepicker. And when you choose a date - replace the $ char with the selected date.
hope this will help you.
jsFiddle

Using Jquery Hotkeys plugin you can easily do this:
html
<textarea id="status_input"></textarea>
js
$('#status_input').bind('keydown', '$', function(e){
// dollar sign pressed
// load datepicker
$('#status_input').datepicker('show');
})