I've got an issue, but I'm not sure if it's something I'm doing wrong, or if this feature just isn't supported yet.
Basically I have the following lines of code:
<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />
<input type="date" name="dob" id="dob" value="" placeholder="Date of birth" />
I've tested this on the desktop version of Safari and all good, but when I test it on the iPad, the second input doesn't show the placeholder text. Does anyone know if placeholder text is supported on type="date" on the iPad?
Cheers
Nick
The iPad is doing the correct thing. The placeholder attribute isn't supported on input elements on type date. It's probably working on desktop Safari because that doesn't support the date type, so that attribute is being ignored and you're left with a plain text field. You could check in the DOM inspector.
Slight hack bit here goes...
Initially have the field as a text field. When the user focuses on the field switch the fields type to date and re-focus.
tested in ios6
HTML
<input type="text" placeholder="DOB" id="dob" />
JS
<script>
var textbox = document.getElementById('dob')
textbox.onfocus = function (event) {
this.type = 'date';
this.focus();
}
</script>
Using the solution of sidarcy:
<input type="date" name="dob" id="dob" value=""
placeholder="Date of birth"
onfocus="this.type='date';this.focus();"
onblur="if(this.value == '') this.type='text';"/>
CSS for iOS Safari:
input[type='date']:after {
color: #aaa;
content: attr(placeholder);
}
Then use placeholder on date input:
<input name="mydate" type="date" value="" placeholder="Select a date" />
add this to header
<script type="text/javascript">
var datefield = document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type != "date") { //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
}
if (datefield.type != "date") { //if browser doesn't support input type="date", initialize date picker widget:
jQuery(function($) { //on document.ready
$('input[type="date"]').datepicker();
$('input[type="date"]').attr('placeholder', 'dd.mm.rrrr');
});
}
</script>
Related
I have the app working using Radio buttons e.g.
#using (Html.BeginForm("SetCulture", "Home"))
{
<input type="radio" name="culture" id="en-us" value="en-us" class="culture" /> English
<input type="radio" name="culture" id="tr" value="tr" class="culture" /> Türk
}
but when i use input of image type it does not send the wanted VALUE
#using (Html.BeginForm("SetCulture", "Home"))
{
<input type="image" src="~/Content/Images/en.png" name="culture" id="en-us" value="en-us" class="culture" />
<input type="image" src="~/Content/Images/tr.png" name="culture" id="tr" value="tr" class="culture" />
}
jQuery code:
$(".culture").click(function () {
$(this).parents("form").submit(); // post form
});
HomeController Code:
public ActionResult SetCulture(string culture){
// action code here
}
I see no reason why the images wouldn't work but for some reason it happens. Any ideas?
Thank you so much
In the first code block (using <input type="radio" .. />), you form will only post back one value for culture (the value of the selected radio button).
In the second code block (using <input type="image" .. />) your form will post back the values of both inputs, so your form data is culture=en-US&culture=tr
The DefaultModelBinder will bind the first value and ignore the second value so the value of culture in the POST method will always be "en-US" irrespective of which image you click.
One option would be to disable the other input (disabled inputs do not post back a value, for example
$(".culture").click(function () {
$(this).siblings().prop('disabled', true); // disable the other input
$(this).parents("form").submit(); // post form
});
Another option for handling this is to use <img> tags in conjunction with a hidden input for the culture value
<input type="hidden" name="culture" id="culture"/>
<img src="~/Content/Images/en.png" data-culture="en-US" class="culture" />
<img src="~/Content/Images/tr.png" data-culture="tr" class="culture" />
$('.culture').click(function () {
$('#culture').val($(this).data('culture')); // update the hidden input
$('form').submit();
})
I want to disable the remember me password prompt of IE/firefox/chrome browser
may developer and blog suggest me to add autocomplete ="off" in <form> tag
but it's not working.
Please give suitable answer thank in advance..
//You can change the type of the password field to text before submitting the form
<script type="text/javascript">
function validate() {
return true;
}
function copyPass() {
document.getElementById("hidPassword").value = document.getElementById("passwordField").value;
if (document.getElementById("passwordField").value != "") {
var passwordLength = document.getElementById("passwordField").value.length;
document.getElementById("passwordField").value = "•".repeat(passwordLength);
}
document.getElementById("passwordField").type = 'text';
}
function changeType() {
document.getElementById("passwordField").type = 'password';
document.getElementById("passwordField").value = document.getElementById("hidPassword").value;
}
</script>
<form method="post" action="yoururl" runat="server">
<input type="text" name="username" />
<input type="password" id="passwordField" name="passwordField" onfocus="javascript:changeType()" onblur="javascript: copyPass()" />
<input type="hidden" name="hidPassword" id="hidPassword" value="" />
<input type="submit" runat="server" name="btnsubmit" value="Submit" onclick="javascript:return validate()" />
</form>
Instead of setting autocomplete="off" on a <form> tag, set it on the individual <input> tags.
For browser support, see caniuse.
Is there a possibility to have a number input with minus-button on the left and plus-button on the right? Or maybe also -- ++ to change value in bigger steps.
I know that I'm not the first one asking this but:
This solution is not displaying correctly in the first turn and jQuery-Mobile-Stepper-Widget from Github (can't post another link because I'm new) does not work with current version of jQuery Mobile.
The result should look like the screenshot in this question: Has anyone implemented jQuery Mobile Add (+/-) Button Number Incrementers? respectively horizontal grouped buttons in jQuery Mobile
Any ideas or new snippets, working with current version of jQuery mobile?
Here is a hint, the rest is purely CSS job and extra JS codes to control the value, e.g. maximum, minimum...etc.
HTML
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<button id="plus" data-inline="true">+</button>
<input type="text" id="number" value="0" disabled="disabled" />
<button id="minus" data-inline="true">-</button>
</div>
Code
$('#plus').unbind('click').bind('click', function () {
var value = $('#number').val();
value++;
$('#number').val(value);
});
$('#minus').unbind('click').bind('click', function () {
var value = $('#number').val();
value--;
$('#number').val(value);
});
JSFiddle
In jQM the input type number does the most of the magic you want
<input type="number" name="number" value="0"/>
If you require more fancy styling you have to follow Omar's code
<i onclick="qty('plus');" class="fa fa-plus c_pointer"></i>
<input type="text" id="prdqty" name="qty" value="1" placeholder="1">
<i onclick="qty('minus');" class="fa fa-minus c_pointer"></i>
function qty(val){
pqty = $('#prdqty').val();
if (val == "plus") {
var newVal = parseFloat(pqty) + 1;
} else {
if (pqty > 1) {
var newVal = parseFloat(pqty) - 1;
} else {
newVal = 1;
}
}
$('#prdqty').val(newVal);
}
Working with knockout.js (and knockout-validation) I have this:
self.nickname = ko.observable("").extend({
required: true,
minLength: 3
});
and
<input type="text" data-bind="value: nickname" class="short" maxlength="30" />
<div class="formRow rowErrorMsg" data-bind="visible: nickname.isValid() == false"><span class="staticImages staticImagesError"></span> <?php text("Enter a valid username") ?></div>
but the problem is that when "nickname" its not valid then apper a text next to the input control. The DIV with the error message start visible and then work fine.
I need to do this:
when "nickname" is not valid then just display the DIV with my custom message and format.
when page is loaded then the DIV have to stay hidden.
You need to configure knockout-validation to not show the error-messages. There are two ways.
The first is via binding:
<div data-bind='validationOptions: { insertMessages: false }'>
<input type="text" data-bind="value: nickname" class="short" maxlength="30" />
<div class="formRow rowErrorMsg" data-bind="visible: nickname.isValid() == false">
</div>
The second one is via code:
Use the ko.validation.init({ insertMessages: false }); function
Use the ko.applyBindingsWithValidation(viewModel, rootNode, { insertMessages: false }); function **contextual
A description of all configuration options can be found at: https://github.com/ericmbarnard/Knockout-Validation/wiki/Configuration
If you have many fields you have to validate you could use an messageTemplate template instead of manually creating all the errorMessage divs.
I tried this code to achieve what I want to do. It worked when I tried it in my ordinary HTML file, but when I tried it in my JQuery Mobile page, the code did not work well for me. Are there different ways or code to select JQuery Mobile checkboxes?
Here's the code that I tried:
JAVASCRIPT:
<script>
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
HTML
<form method="GET" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
I like Britney Spears
</label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
I like Hillary Duff
</label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
I like Mandy Moore
</label>
<br>
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">
I was not aware that JQuery Mobile's checkboxes need to be refreshed after unchecking/checking them via JQuery or Javascript. Here's the code:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
http://api.jquerymobile.com/checkboxradio/#method-refresh
Try this:
function SetAllCheckBoxes(FormName, CheckValue){
$.each($("#"+FormName+" input[type=checkbox]"), function(){
$(this).attr("checked",CheckValue).checkboxradio("refresh");
});
}
I removed the FieldName because your function was named SetAllCheckBoxes, just your input fields are the same. You just need tell what's your form and the state of your checkboxes.
To toggle / refresh checkboxes in jquery mobile you need to use .prop, rather than .attr.
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");