I want to try to implement a gradually hidden placeholder on my following datepicker:
<b-input-group class="input-datepicker">
<b-input-group-prepend>
<b-datepicker
v-model="datepicker"
button-only
locale="en-US"
></b-datepicker>
</b-input-group-prepend>
<b-input
v-model="datepicker"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
class="mr-0"
></b-input>
</b-input-group>
I use Vuejs with bootstrap-vue and my date Format is YYYY-MM-DD
I wish to have, for example, on input field at beginning ____-__-__ and we gradually input data, we have for example 2020-__-__ or 2020-0_-__ and reversely
I have searched in Internet and i don't find any good answers.
Sorry for my English if is not correct, i'm french
Thank you in advance
Best Regards,
I have a date picker that when I choose a new date I wish to fire another date picker on another input
Input one:
<input name="pDate" type="text" class="form-control date-with-time-inputs" onchange="changeDate()" id="p_date" placeholder="" value="{{$times['now']}}">
Then I have onchange event
<script>
function changeDate() {
const input = document.getElementById('d_date');
input.select();
console.log('clicked');
}
</script>
And then the second input as so
<input name="dDate" type="date" class="form-control date-with-time-inputs" id="d_date" placeholder="" value="{{$times['tomorrow']}}">
The console log fires and the function is working but the 2nd input is not firing up.
You can't open/click() it from JS(only focus() but that would not help you):
The HTML5 <input> with type='date' will only work with a few browsers.
Also, as a programmer you have no control over its appearance or any
other aspect (such as showing and hiding it) (Quick FAQs on input type date)
Thus, if you must do this, the HTML5 <input type='date'> tag is not an
option. You'll have to use something build in JavaScript such as
jQuery UI or Bootstrap date picker.
Found here: https://stackoverflow.com/a/18327043/12753766
I have a search input with a phone masked formatting when I'm clicking the (x) to clear the input, it removes just the first number.
$(function() {
$('#phoneNumber').mask("(999) 999-9999");
});
<td>
<input type="search" cssStyle="width:170px" id="phoneNumber" path="phoneNumber"/>
<script type="text/javascript">
$(function() {
$("#phoneNumber").focus();
});
</script>
</td>
if I deleted the mask, the clear will be working just fine
I'm not sure what this mask plugin does, but I'm going ot suggest you get rid of it and just use some standard HTML instead.
Use type="tel" instead of type="search" since this is for a telephone number and not for a search
Use autofocus to automatically set the focus to this field instead of doing it with jQuery's .focus() function
use the placeholder attribute instead of a jQuery library
<input type="tel" autofocus placeholder="(999) 999-9999" style="width:170px"/>
it should work as you want, and now it requires zero JavaScript and it uses native HTML features.
Ideally you should update the versions to latest. But as a work around until you update JQuery to latest, just update the Mask library version to latest (1.7.7) and that should resolve your issue.
https://plugins.jquery.com/mask/
I have a mobile website and it has some HTML input elements in it, like this:
<input type="text" name="txtAccessoryCost" size="6" />
I have embedded the site into a WebView for possible Android 2.1 consumption, so that it will also be an Android application.
Is it possible to get the keyboard with numbers instead of the default one with letters when this HTML input element is focused?
Or, is it possible to set it for the whole application (maybe something in the Manifest file), if it is not feasible for an HTML element?
<input type="number" />
<input type="tel" />
Both of these present the numeric keypad when the input gains focus.
<input type="search" />
shows a normal keyboard with an extra search button
Everything else seems to bring up the standard keyboard.
IMPORTANT NOTE
I am posting this as an answer, not a comment, as it is rather important info and it will attract more attention in this format.
As other fellows pointed, you can force a device to show you a numeric keyboard with type="number" / type="tel", but I must emphasize that you have to be extremely cautious with this.
If someone expects a number beginning with zeros, such as 000222, then she is likely to have trouble, as some browsers (desktop Chrome, for instance) will send to the server 222, which is not what she wants.
About type="tel" I can't say anything similar but personally I do not use it, as its behavior on different telephones can vary. I have confined myself to the simple pattern="[0-9]*" which do not work in Android
inputmode according to WHATWG spec is the the default method.
For iOS devices adding pattern could also help.
For backward compatibility use type as well since Chrome use these as of version 66.
<input
inputmode="numeric"
pattern="[0-9]*"
type="number"
/>
This should work. But I have same problems on an Android phone.
<input type="number" /> <input type="tel" />
I found out, that if I didn't include the jquerymobile-framework, the keypad showed correctly on the two types of fields.
But I havn't found a solution to solve that problem, if you really need to use jquerymobile.
UPDATE:
I found out, that if the form-tag is stored out of the
<div data-role="page">
The number keypad isn't shown. This must be a bug...
Some browsers igoners sending leading zero to the server when the input type is "number". So I use a mixing of jquery and html to load a numeric keypad and also make sure that the value is sent as a text not as a number:
$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">
For a Numeric Keyboard with DECIMAL POINT
<input inputmode="decimal" type="number" />
Add a step attribute to the number input
<input type="number" step="0.01">
Source: http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
input type = number
When you want to provide a number input, you can use the HTML5 input type="number" attribute value.
<input type="number" name="n" />
Here is the keyboard that comes up on iPhone 4:
iPhone Screenshot of HTML5 input type number
Android 2.2 uses this keyboard for type=number:
Android Screenshot of HTML5 input type number
i am making a form that has a date field using textfield, i want my date field to have a label format inside the textfield, here's the picture:
after clicking on the textfield the format will be erased and the hyphen will remain like this picture:
i already made the code for the label format,
here's my code:
<input type="text" name="date" value="DD_MM_YYYY" id="date" style="width:180px" onclick="if(this.value=='DD_MM_YYYY'){this.value=''}" />
</p>
My problem now is the hypen that will remain after clicking the textfield.
Anyone knows how to do that?
Thanks in advance.
I would recommend Masked Input Plugin.
http://digitalbush.com/projects/masked-input-plugin/
You can define your own type of mask by using the code:
jQuery(function($){
$("#myinput").mask("99-99-9999",{placeholder:" "});
});
Then you can define a placeholder to the input:
<input id='myinput' placeholder='dd-mm-yyyy'>
You can use the placeholder attribute.
<input placeholder=" - - " value="DD-MM-YYYY" />
You can continue to set the value to nothing when the element is focused. On blur set the value back to DD-MM-YYYY.
Note that this attribute isn't supported by all browsers.