I am currently having an issue with Angular.X (Tested with A5 & A6). It appears when using a "Select" within the html, Internet Explorer doesn't bind appropriately with ngModel. I've tested with Chrome and Edge and they work fine, When trying to use this combination in edge- the select never gets set as its default value (The value that is assigned within the model/property its bound to). So the page will load with empty values in the select. I've tried searching but have not had any luck finding an answer how to fix this. 9/10 of the posts I find when searching for this are related to AngularJS. Which always makes troubleshooting fun!
Here is a bit of the code as to how I am doing this:
HTML:
// The repeater is up top somewhere and looks like this:
// <tr *ngFor="let i of this.imgArr">
<td class="ImageCell">
<select [disabled]="this.ApplyingChanges" [(ngModel)]="i.ImageType" class="form-control" (change)="this.ChangeInput(i)">
<option>Part</option>
<option>Model</option>
</select>
</td>
TS Class:
export class PartImage{
public ImageType = 'Part';
The above code is broken up to show what matters.
Thanks for the help in advance!
Sorry I actually resolved this.
After tinkering around, I discovered: With Edge and Chrome, an "option" is not required to have the attribute "value" and uses the label by default. With Internet Explorer this is not true and requires that attribute (Or ngValue) to work correctly.
Related
Recently I have come across an issue where I wanted to disable auto-complete in all browsers.
Chrome has a new feature in settings where you can add a card number. And the requirement was to also disable that.
What worked in all browsers was to do this autocomplete=false at form level.
But this is not compliant with w3 rules, where they enforce to have autocomplete=off|on.
Can someone please explain to me why false works in all browsers?
even ie8, all firefox, safari etc., but it is not compliant.
You are right. Setting the autocomplete attribute to "off" does not disable Chrome autofill in more recent versions of Chrome.
However, you can set autocomplete to anything besides "on" or "off" ("false", "true", "nofill") and it will disable Chrome autofill.
This behavior is probably because the autocomplete attribute expects either an "on" or "off" value and doesn't do anything if you give it something else. So if you give it something other than those values, autofill falls apart/doesn't do anything.
With the current version of Chrome it has been found that setting the autocomplete attribute to "off" actually works now.
Also, I have found that this only works if you set the autocomplete attribute in each <input> tag of the form.
There has been a response to this ambiguity in the Chromium bug listings here.
Disclaimer: This was found to be true in Chrome version 47.0.2526.106 (64-bit)
After Chrome version 72.XX:
Chrome ignores autocomplete="off" autocomplete="no-fill" or autocomplete="randomText" both on field and form level.
The only option I found is to follow a work-around by tricking Chrome to populate the autofill on a dummy Textbox and password and then hide them from the user view.
Remember the old method with style="display: hidden" or style="visibility: hidden" is also ignored.
FIX:
So create a DIV with height: 0px;overflow:hidden which will still render the HTML elements but hide them from User's view.
Sample Code:
<div style="overflow: hidden; height: 0px;background: transparent;" data-description="dummyPanel for Chrome auto-fill issue">
<input type="text" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyUsername"></input>
<input type="password" style="height:0;background: transparent; color: transparent;border: none;" data-description="dummyPassword"></input>
</div>
Just add the above div within the HTML Form and it should work!
Use autocomplete="my-field-name" instead of autocomplete="off". Be careful what you call it, since some values are still recognized like autocomplete="country". I also found that using the placeholder attribute helped in some tricky scenarios.
Example:
<input type="text" name="field1" autocomplete="my-field-name1" placeholder="Enter your name">
Chrome recently stopped using autocomplete="off" because they thought it was overused by developers who didn't put much thought into whether or not the form should autocomplete. Thus they took out the old method and made us use a new one to ensure we really don't want it to autocomplete.
$("#selector").attr("autocomplete", "randomString");
This has worked reliably everytime for me.
Note : I have invoked this LOC on modal show event.
If anyones reading this and is having difficulty disabling autocomplete on username and password fields for new users, I found setting autocomplete="new-password" works in Chrome 77. It also prevented the username field from auto completing.
Ref: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Auto complete value other that off and false works.
autoComplete="nope"
autoComplete="foo"
autoComplete="boo"
autoComplete="anythingGoesHere"
Tested on chrome 76 and react 16.9.0
It's 2020 and if someone is still struggling with it as I did. The only solution that worked for me is as follows, setting autocomplete to any random string disables the autocomplete but it works only if its done after the page load. If that random string is kept as default value then chrome annoyingly sets it back to off. So what worked for me is (I'm using jquery) on document ready event, I added the following,
window.setTimeout(function () {
$('your-selector').attr('autocomplete', 'google-stop-doing-this');
}, 1000);
Without the timeout, Chrome still somehow resets its back to off.
if there any "password type input" in your form you can try this;
<input type="password" ..... autocomplete="new-password" />
Try this one:
.
<input type="text" autocomplete="__away">
autocomplete="none" perfectly works for angularjs and angular 7
Try this over input tag:
readonly onfocus="this.removeAttribute('readonly');
Example:
<input type="text" class="form-control" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');">
Setting the autocomplete attribute to true|false or on|off both does not work in all the conditions. Even when you try with to placeholder also it wont work.
I tried to use autocomplete="no" for avoiding the chrome autofill plugin.
This autocomplete="no" should be written inside a input line, for example
Although it might not be the most elegant solution, this worked for me:
JQuery version:
$("input:-internal-autofill-selected").val('');
VanillaJS version:
document.querySelectorAll("input:-internal-autofill-selected").forEach(function(item){item.value = '';})
When Chrome autofills an input field, the fields gets an internal pseudo element -internal-autofill-selected (which also gives the input the light blue background). We can use this pseudo element as selector in order to undo the Chrome autocomplete/autofill.
Please note that you may (depends on your implementation) need to wrap your code in a timeout as Chrome autofills after the DOM is loaded.
Not perfect but working solution using jquery
$(document).ready(function(){
if (navigator.userAgent.indexOf("Chrome") != -1) {
$("#selector").attr("autocomplete", "nope"); // to disable auto complete on chrome
}
})
autocomplete="one-time-code"
worked for me.
As an addition to #camiblanch answer
Adding autocomplete="off" is not gonna cut it.
Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.
In our MVC5 project there is a page where user can check multiple assets.
Each asset is represeneted by checkbox and name.
When there are a lot of assets (about 800-1000) Chrome getting extremely slow. It's even sometimes show message that "page is unresponsible".
It looks like this:
- page is partially rendered and stucked on DIV with checkboxes
- then there is delay 30-40-50 sec. Sometimes error message
- DIV with checkboxes rendered and rest of the page rendered too
In FF and IE it's ok.
Thanks in advance
I agree that it's not a good user experience, but at the current stage I need to solve this problem.
Here is markup (this div is 4 level nested):
<div class="list">
#for (int i = 0; i < Model.Items.Count; i++)
{
<text>
#{var cid = Guid.NewGuid().ToString();}
#Html.HiddenFor(m => Model.Items[i].Id)
#Html.CheckBoxFor(m => Model.Items[i].Selected, new { id = cid })
<label for="#cid">#Trakopolis.WebSite.AppHelper.GetLocalizedString(Model.Items[i].Name)</label><br />
</text>
}
</div>
You could try to use javascript for this where everything is in plain text with data attributes and on click, input element is temporarily added, the input element takes the input, sends it to the server (or saves it in indexeddb for async using a service worker) and removes itself or waits for next input.
<td id=“unique-id1” data-url=“/action” data-name=“InputName”>data</td>
Same problem with Safari, I suspect a webkit bug. Any page with hundreds or thousands of input fields will be very very slow to navigate or edit.
See Why does Safari Mobile have trouble handling many input fields on iOS 8
We have a page with some tables with 300 rows, each row has several cells and each cell is editable (input).
Workaround given in link above works nicely.
Looks like Chrome not uses closing tags for checkboxes dropdown markup for and <br> that is somehow forces additional browser internal checks and as result slow page rendering in comparison to IE and FF browsers(that are using closing tags). To avoid Chrome slow loading because of <br /> tags you may use opening and closing <div> instead and speed up page a bit, but I'm not sure whether <input> elements may be replaced somehow.
I'm using EmberJS for my webapp and when I create a new record (set in edit mode), my first field (input text) has the autofocus="autofocus" parameter set. It works on Chrome the first time without problem, but not after.
The page loads once because it's an Ember app, and the views (record views) are being re-generated when I create a new record.
Any idea how to resolve this issue?
EDIT:
I have removed the autofocus property, and tried only to use Jquery focus() like in https://stackoverflow.com/a/14763643
App.FocusedTextField = Em.TextField.extend({
didInsertElement: function() {
this.$().focus();
}
});
Now, there is no focus even the first time. Also, if I tried replacing this.$().focus(); with this.$().hide();, then the input is hidden. this.$() in the console shows the right input as well, but focus() just does not work!
I would consider moving your input to a view or a component and then do something like this.$().focus(); in the didInsertElement function.
I came across the exact same issue with autofocus but the .focus() function did work for me. Here's how I coded it:
html:
<input type="text" id="idTextbox"/>
javascript:
$('#idTextbox').focus();
This must be something utterly stupid that I've done or am doing, but I have an input with a value attribute that simply isn't being displayed:
<div class="input text required">
<label for="Product0Make">Make</label>
<input name="data[Product][0][make]"
type="text"
maxlength="255"
value="AC Make"
id="Product0Make">
</div>
Has anyone ever seen this before? Do I have some kind of typo that I'm just blind to? For whatever it may be worth, here's the CakePHP code that's generating this line:
<?php echo $this->Form->input( 'Product.' . $index . '.make', array( 'default' => $product['Product']['make'] ) ) ?>
I have a small form with a handful of text inputs, 1 textarea and 2 selects. None of the text input values display, but everything else is fine.
Any thoughts would be appreciated. I can't even believe I'm having to ask this question, but that's how crazy it's making me.
Argh. I knew this was going to be something beyond stupid. There was a bit of Javascript that was clearing data. The clearing was useful in other places, but I didn't know it was executing so it was a serious pain to track down. Once I prevented the clearing in this scenario, my values actually appeared. Because I was looking at the code in web inspector, I assumed that it would be a "live" view, but I guess that's not entirely true.
Thanks for your help, everyone.
For my side, it was a problem only for Firefox.
I resolved by adding the attribute autocomplete="off" in the input field.
<input type="text" value="value must appear" autocomplete="off"/>
Mine was related to AngularJS
I was trying to put both an HTML Value and an ng-Model, thinking that the ng-Model would default to the Value, because I was too lazy to add the Model to the $scope in the Controller...
So the answer was to assign that default value to the $scope.variable in the controller.
For me it was browser caching. Changing the URL string or clearing history can help.
For Googler's who may have the same issue: This can happen if you have a non-numeric value in a number type input field.
For example:
<input type="number" value="<? echo $myNumberValue; ?> "/>
This will show nothing even though Dev tools says the value is there, since the extra space after ?> makes it non-numeric. Simply remove the extra space.
Are you confusing the uses of the 'default' and the 'value' parameters for $html->input()?
If you're are using 'default' => $product['Product']['make'] and $this->data is present, the field will not be populated. The purpose of the 'default' parameter is to display a default value when no form data ($this->data) is present.
If you want to force display of a value, you should use the 'value' parameter instead. 'value' => $product['Product']['make']
For me it was because I was using the <input> tag without enclosing it inside a <form> tag
Had a similar problem with input value retrieved via ajax, correctly set and verifiable via browser console, but not visible. The issue was another input field having the same id, and it was not evident because of several JSP files included, many of them having forms.
I even set autocomplete to "off" with no result. I ended up putting the next jquery snippet at the document.ready event.
myForm.find("input").each((i, el) => {
$(el).val($(el).attr("value"));
});
Adittionally, this would be the equivalent in pure es2015:
document.querySelectorAll("myForm input").forEach(el => {
el.value = el.getAttribute("value");
});
If your not using a precompilor like Babel and you need compatibility for old browser's versions, change the "(el) =>" for "function(el)". I tried both codes in my scenario and worked fine.
For me the problem was that I had multiple inputs with the same id. I could see the value in the field, but reading it via javascript gave an empty value because it was reading a different input with the same id - I was surprised that there was no javascript error, just could not read the values I could see in the form.
For me it was wrong number format: Chrome expected "49.1", but ASP.NET passed "49,1", and it just didn't display!
<input type="number" value="49,1"/> // Should have been 49.1 !!!
Same problem occured on electron:
I was clearing the field with document.getElementById('_name').value = '' instead of document.getElementById('_name').setAttribute('value', "").
So I guess simple quote broke the field or input has a second value hidden attribute because I could rewrite on the fields and it won't change the value on the inspector
I had the same problem of #Rob Wilkerson, a onchange() was cleaning the value of the input with "", so i changed to 1. Such a dumb problem!
HTML
<input class="form-control inputCustomDay" type="text" id="txtNumIntervalo" onkeyup="changeTipoOptions()" value="1" min="1" />
Jquery
$("#txtNumIntervalo").val(1);
Mine was related to Angular.
I just ran into the same issue recently and realized that when you use NgIf to display a template, the said template does not automatically use display the data from the variables in the component.
As a quick fix I used ngClass just to Hide it and display it.
If anybody happens to be here because their input with type="dateTime-local" is not displaying the value... the value must be in format YYYY-MM-DDThh:mm
I'm having a ton of problems with every version of IE, one of which is that IE7 won't register input in this text input field.
http://www.flightm8.com/redesign
I'm a bit nervous about posting the link since the site looks a mess and doesn't function properly in any version of IE at the moment, and it is still quite a way off being ready for public consumption. But if anyone can shed any light on this particular problem I'd very much appreciate it.
So the question is: What is causing this problem in IE7?
Update: I've also added an additional textfield at the bottom of the page to try and rule out any CSS wierdness that might be causing the problem.
<form method="post" action="nowhere.php">
<input type='text' name='test' value='testing' />
</form>
And I still can't enter any text, or select the text that is in there. I'm wondering now if it's a problem caused by running a standalone version of IE7 and IE6.
thanks
-t
the function causing problem is this one :
function modalAlert
the call that need to be debugged is this one :
modalAlert("NO SELECTIONS");
in
function findRoutes
the line that bug is :
$("#dialog").css("top", dTop);
first, you should avoid iframes when you can, why don't you do :
var message = $('<div></div>').load('/modal/"+modalpage);
instead of crappy code like this :
var iframe = "<iframe id='modal_frame' width='533' height='292' src='/modal/"+modalpage+"' >You didn't give me any information</iframe>"
If you don't need iframes, don't use them !
$('body').append(message);
I have IE7 on win xp (native), I was able to enter text but after a freeze (when you add all those markers), then when entering text and clicking on "find routes", there's a bug that i just explained to you ...
I would imagine it is because the input box doesn't have a 'name' field, which is used when posting form data.