Readonly fields don't seem to work on iOS. This is what I have:
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #readonly = "true" } })
Essentially, this gets translated to this:
<input type="date" readonly="readonly" />
Works on Windows Chrome, but does does not work on the iPhone. Still able to edit the field. The date picker shows up.
This is actually a bug in iOS, a readonly date field is still changeable.
You can fix it by adding something like this to the HTML:
onclick="this.blur()"
I just encountered this. Solved it by making it type="text" when I am rendering it as read-only mode.
Try changing your input tag to this
<input type="date" readonly />
Read this too, maybe is an iOS bug.
Use the disabled attribute instead of readonly.
<input type="date" disabled />
Related
I am outputting a DateTime to a string format of MM/dd/yyyy to an text input field. This works fine on all browsers except latest version of Safari (on Yosemite, if that matters). See examples below:
This code:
<div><input type="text" value='#Model.Arrival.Value.ToString("MM/dd/yyyy")' /></div>
<div><input type="text" value="#Html.Raw(Model.ArrivalDateString)" /></div>
<div><input type="text" value="8/23/2015" /></div>
<div><input type="text" value="08/23/2015" /></div>
Produces this:
The test page I setup for this has absolutely nothing else running on it. It's just a bare bones HTML page with server side output from a view model. MVC 5 and .net framework 4.5.1
Viewing page source, it looks like this in Safari:
<input type="text" value="08-20-2015" />
On other browsers, it is this:
<input type="text" value="08/20/2015" />
UPDATE: It looks like .NET is choosing a different culture / format for Safari browsers. A possible fix is to specify a format provider.
I was able to fix the issue by specifying a culture for the string format. ie.:
DateTime arrival = DateTime.Now;
CultureInfo invariant = CultureInfo.InvariantCulture;
string dateString = arrival.ToString("MM/dd/yyyy", invariant);
en-US works as well. Still not sure why this happens. It looks like ASP.NET is doing something different based on the user agent. The request headers otherwise looks like same.
I would've figured this out earlier if I was able to get browserstack to work locally.
I have the following mvc code:
#Html.DropDownListFor(model => model.State, Model.States, new { #class = "form-control",
// Displays if the country is United States
style="display:{{State_Display()}}",
Name="State"})
#Html.TextBoxFor(model => model.State, new { #class = "form-control",
// Displays if the country is not United States
style="display:{{Province_Display()}}",
Name="Province"})
EDIT: I guess I should mention that Province_Display() is a method in my angular controller that either returns the string "none" or "block" depending on the country chosen.
In the latest versions of Chrome and Firefox, this does what you'd expect: if the user picks united states from a different control, the State field is shown and the Province field hidden.
In IE 10 however, both controls display all the time. Inspecting the elements with f12 in IE, neither of them have any style property at all.
The way I'm thinking of solving this would be to use angular to apply an additional CSS class to the elements instead of using angular to dynamically update the inline style, but my question remains:
Why does this work in Chrome and Firefox but not IE? What's being handled differently? Why doesn't anything appear for Style when I inspect in IE? If you know, will my CSS class idea actually fix the issue (before I bother reworking things)? I'd like to understand the cause so I can avoid similar situations in the future. Thanks!
Additional info:
Right-click, view page source (same in both chrome/IE):
<select Name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" name="State" style="display:{{State_Display()}}">
<input Name="Province" class="form-control" id="State" name="State" style="display:{{Province_Display()}}" type="text" value="" />
Inspect (Chrome):
<select name="State" class="form-control" data-val="true" data-val-required="The State field is required." id="State" style="display:block">...omitted...</select>
<input name="Province" class="form-control" id="State" style="display:none" type="text" value="">
Inspect (IE):
<select name="State" class="form-control" id="State" data-val-required="The State field is required." data-val="true">
<input name="Province" class="form-control" id="State" type="text" value=""/>
There's still really not enough of your code to go by, but there are a few approaches you can take. The class thing you recommend should work, but there's something in your code we can't see that's causing it to not execute in IE properly. (any errors in your console?) My best guess... you're missing your DTD, or it's set improperly. Try adding this at the top of your html template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
A better approach (still need to ensure your DTD is set correctly) would be to use ng-show/ng-hide: http://docs.angularjs.org/api/ng.directive:ngHide
<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue"></div>
<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue" class="ng-hide"></div>
However, if you wish, you can define a css class like so:
.hide {
display:none;
}
and just apply that class to whichever input you wish to hide within you application logic.
I know there's a way to disable the first-letter-capitalization in iOS Safari, but is there a way to engage caps-lock?
Like:
<input type="text" autocapitalize="all" />
try this
<input type="text" style="text-transform:uppercase; font-family:Helvetica; font-size:14px" />
hope this will help you
Add the attribute autocapitalize="characters" to your input/textarea.
Reference: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
I currently have a link in the below form:
Change
In order to fit the look of the site in which I'm adding this link, I want to change it to a button input, as so:
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')" />
However, I'm running into a snag with this second form: the single quotes around #Url.Action("ChangeNumbers") are being flagged as Unterminated string constant. Can anyone tell me what I'm doing incorrectly and how to fix it?
EDIT
It didn't occur to me to just try the page - it looks like the second form works. So now my question is - why is Visual Studio flagging this as incorrect?
You're not doing anything "incorrectly" per se, it's just that Razor isn't perfect, and things like quotes within quotes tend to cause it to freak.
One quick fix would be to store the URL in a variable and then use the variable:
#{ var url = Url.Action("ChangeNumbers"); }
<input type="button" value="Change" onclick="changeNumbers('Numbers', '#url')" />
However, an even better fix is to not use the onclick attribute at all. Put this where it belongs: in JS.
<script>
$('#myButton').on('click', function () {
changeNumbers('Numbers', '#Url.Action("ChangeNumbers")');
});
</script>
Used jQuery above, since it's included in MVC by default
I've found that to make Visual Studio happy in this scenario, the easiest thing to do is simply change the <input /> element to a <button></button> element and the error will resolve itself:
<button type="button" onclick="changeNumbers('Numbers', '#Url.Action("ChangeNumbers")')">Change</button>
Otherwise, to continue using an <input /> the markup will need to be changed to the following:
<input type="button" value="Change" onclick="#("changeNumbers('Numbers', '" + Url.Action("ChangeNumbers") + "')")" />
I installed calendar Version 1.2.0-SNAPSHOT in grails and working good .
But facing one Issue :
When click on cancel button i was doing form reset .but the calendar field is becoming clear and not reseting to default date .
<g:form url="${response}" id="program" name="program" method="post">
<calendar:datePicker name="startDate" id="startDate" defaultValue="${program.startDate}" dateFormat="%Y-%m-%d"/>
<input type="button" id="cancel" name="cancel" value="Cancel" onclick = 'reset_form(this)' />
</g:form>
function reset_form(this_)
{
document.getElementById('program').reset();
}
any one have idea please ?
thanks.
Two ways to solve this issue as far as I can see. Either correct the typo inside your JavaScript and refer to the correct id of your form (program not new_program) or use the standard reset button for forms <input type="reset" .../> instead of your javascript solution.