In my HTML I have a form with a few inputs (type text) and I have 2 app-comboboxes. What I would like to do, is set autocomplete off for every field in the form.
I set autocomplete="off" for the entire form, works perfectly except on those 2 dropdowns.
The dropdown works in the following way: if I click on it, a dropdown will appear with the full list of options to choose. If I type something, the list will be filtered based on what I typed. My problem is, when the field is empty, and when I click on it, another dropdown appears with early typed values, suggestions from Chrome above my dropdown with the full list of values. My Google Chrome Version is 69.0.3497.
I tried to put another autocomplete="off" in the app-combobox element, which didn't work. Then I tried to write a random string for autocomplete (eg. autocomplete="nope"), didn't work again.
I tried every solution which I found, but none of them work.
I would appreciate if someone has a solution for this, or just a clear answer that you cannot do this anymore in Chrome.
Thank you very much!
Related
Recently we've got one issue from customer that they have seen some random values in dropdown and after clearing browser cache, those values are gone and now its working perfectly fine.
I have used normal <select> <option> tags from html in angular and by using *ngfor I'm populating that data in dropdown.
NOTE: values are completely static and never changed in any code.
My question is, why some random values/strings were added automatically in that dropdown (which are not even present in input array). I know, it can very much happen in case of <input> tag (autocomplete) but dropdown case is completely new for me. can anyone explain this behavior please.
below marked 2 values which are not present in that static array.
I have an advanced search form that terms/rows can be added to dynamically. I have noticed that the larger the form, then slower the form is when you click in a text field. Sometimes, you click in a text field and wait around 2 seconds on a moderately sized form before anything typed shows up.
It only happens when the text field is initially empty - and only in Safari.
I discovered that if I go into the Safari Preferences, go to the "Autofill" tab, and turn off all "Autofill web forms" checkboxes, the form is zippy - no lag. Apparently, Safari is trying to figure out how to suggest things to enter, like info from my contact card, usernames and passwords, credit cards, etc...
This advanced search form doesn't seem relevant to any of that (unless it tracks repeatedly entered search terms...?). So here are my questions:
Is there a way to tell Safari to not look for autofill possibilities, so that my form doesn't have this lag in Safari?
If #1 isn't an option, is there a way to make Safari's suggestions more efficient - so it can more quiickly figure out that there's nothing to suggest?
Regarding #2, my text fields have no label. The "labels" are the values chosen in the preceding select lists. Here's an example:
Note that after the 1-2 second delay, the autofill icon appears in the field:
Could adding hidden labels make Safari's autofill feature more efficient?
I tried and failed with various "solutions" I found here on stack:
Set attribute autocomplete="off" in both the form and input elements
Added a hidden label both above and below the input tag
Added a class name suggesting the input field type
Tried a javascript solution
None of them worked. I still experienced a delay between clicking in a field and being able to enter text - and the user icon still presented phone number suggestions from my contact card.
I read an old, but otherwise helpful article about how to coax autofill to fill in the correct information. It didn't mention the solution I stumbled upon, but it inspired me to try it...
I added a placeholder attribute to the text input in my django form class:
val = forms.CharField(widget=forms.TextInput(attrs={"placeholder": "search term"}))
And that did it! Now when I click in a search term field (which now shows "search term" in light gray - which is grudgingly OK with me), I can enter text right away and the autofill icon does not appear!:
So I have Create & an Update view with Django. Both use the same template for the form. (It doesn't seem to be a Django problem perse, but in case it turns out relevant...)
With the CreateView, I can easily click into a textarea widget and edit its value. With the UpdateView however, I seem to need to use a bunch of click before somehow I manage to edit the content of the area. I have compared the html/css in both cases & they are exactly the same.
Upon further inspection, it seems that the imported data contains tabs in some empty fields (hence why it only appends in the UpdateView). So the issue appears to be that when I click anywhere in the input/textarea, the tabs make it hard to actually focus/select the cell. That may be why random clicks (or double-clicks to select the tab?) appear to allow me to edit properly.
I'm unsure if the tabs originate from the source data somehow, or just got added along the way. Of course I'll probably figure out a way to clean out that data.
Is there a quick css/jquery fix for this? Some sort of $('input').on("click"...) handler I could use? Of course one option would be to clean up the source data. However if for whatever reason they've been living fine with those in their previous system, I might just leave it & go for a quick fix, should one exists.
Something like this:
<textarea name="descfr2" cols="40" rows="10" maxlength="60" id="id_descfr2"> </textarea>
https://codepen.io/logikonabstractions/pen/GRWPROO
You could use the focus() method from jquery (https://api.jquery.com/focus/).
Try to add the event on your cells so that the input inside became focused on click:
$('.cells').click(function(){
$(this).find('input').focus();
}
I would do something like that (if you can select all your cells with some class attributes)
I have a primefaces autocomplete element which works great except one thig. The problem is that when I enter a valid text (which is mappable to the data behind) but I don't select the element from the propositions, and don't press tab or enter, nothing happens.
So I enter a value and click into another field, the element is not selected and the validation fails. However, I don't want the user to force to explicitly select an item.
My ideas were, that i put an onchange listener to the input element and trigger the primefaces itemSelect event within. But I don't know how to do that, if it's even possible.
Or maybe there are other solutions?
Thanks in advance!
I found a way, although it might not be the most beautiful and easy one.
Maybe it helps somebody...
This is a specific solution for primefaces (5.3), but it should work for other versions too.
$('#form\\:txtAutoComplete_input').val('Foo');
$('#form\\:txtAutoComplete_input').trigger('keydown');
$('#form\\:txtAutoComplete_input').trigger('input');
$('#form\\:txtAutoComplete_panel .ui-autocomplete-item').trigger('click');
For some reason, after the value is entered into the input field, you have to trigger the keydown and the input event in that order. After these events the autocomplete list shows with the matching values. There you have to trigger click on a certain element, so all the backing bean stuff is properly executed.
There is an API for Primefaces widgets.
For instance ;
<p:autoComplete id="gtautoaomplet" value="#{item.soemprop}" completeMethod="#{bean_CrossCheckNew.completeText}" scrollHeight="250"/>
In JS code ;
widget_form_mapingGrid_0_gtautoaomplet.search('foo');
When you write "PrimeFaces.widgets" in your browser console you can see all the widgets available in your page.
For more datail :
https://primefaces.github.io/primefaces/jsdocs/index.html
Good luck.
I am doing a signup form with a few steps, made with angular material tabs. I have 5 tabs each containing a few inputs that the user should fill in. I also have 2 buttons below the tabs, one to get to the next tab and one button to get to the previous tab. I want to disable the upcoming tabs and also disable the button that takes the user to the next tab until the user has filled in the the tab he is on properly. I want the user to be able to go back and change the information that is already filled in on the previous tabs, and when all the tabs are filled in properly a send button is shown. So, that's basic functions for a multi step signup form.
I have managed to do the basic functions for the buttons and the tabs with ng-disabled and ng-hide combined with changing the value on the variable tabNr in my controller, like hiding the previous-button on the first tab and hiding the next-button on the last tab, and that works fine.
When it comes to hide the next-button based on if the form is filled in its a bit more tricky. I am able to disable the next tab by validating the form on the previous tab like this: ng-disabled="!tab1Form.$valid", so that's hard coded and works fine.
The previous- and next-buttons, though, are the same for all tabs and that is the tricky part, so I can't just disable the button if a form isn't valid because the button does not know which tab that is active. I have tried to make a function in the controller but then the problem is that the valid-variable is just a thing in html and I cant evaluate it in the controller.. As far as I have tried and have understood.
So this is the next-button:
<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>
Each tab has this, with it's own number:
<form name="tab1Form" novalidate>
What I've tried is to change the tab, that should trigger the disable, by using angular:
ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"
The browser seems to change the number, and it works for the first tab, but on the rest of the tabs it does not disable the button even though it should, like if the browser does not evaluate the variable properly. I hoped that it should work because I cant think of another way of doing it with these variables...
Does this way of using angular simply not work or am I doing anything wrong? Does anyone have a solution I could use?
In your controller
function Controller($scope){
var vm = this;
vm.form = $scope['tab' + anyNumber + 'Form'];
}
then in your html
ng-disabled="!FormCtrl.form.$valid"