We Keep Coding

Google Chrome Version 76.0.3809.100 (Official Build) (64-bit) Autocomplete Behaviour

I want to disable google chrome's persistent autocomplete in all browser for user experience (my Chrome version is 76).
I have tried many solution including :
1). The answers from
Chrome ignores autocomplete="off"
2). All the answers from
autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
which include
1). Autocomplete="off", autocomplete="somerandomstring"
2). create another fake input above it with hidden style
3). wrap it with invisible div
It seems that the answers from both links are the solution for the outdated version of google chrome almost likely older than 76 chrome version.
<input name="number" type="text" class="form-control search" placeholder="No. Invoice" >
//this input is getting filled with persistent google chrome autocomplete
Expected Output : not filled with autocomplete
Actual Output : filled
Thank you in advance!

I just came across this same issue and none of the original answers seem to work.
As i use the placeholder text, I came up with a solution of adding the placeholder text as the value if the value is blank, as well as changing the color and then use the onfocus event to remove the value if it's equal to the placeholder and remove the color.
Here is an example:
<input type="text" class="form-control" id="search" placeholder="Search Users" value='Search Users' style="color: #6c757d;" onfocus="if (this.value == this.placeholder) {this.value=''; this.style.color=null;}">
The things that you would still have to look out for:
You need to add this to each input.
You need to check input isn't equal to placeholder on validation.
There is one other solution that i found worked:
Add a value to empty input and then remove it using a timeout, this should happen after the autocomplete has run.
html:
<input type="text" class="form-control NoAutoComplete" id="search" placeholder="Search Users" value='Search Users'>
CSS:
.NoAutoComplete {
color: #6c757d;
}
JS:
setTimeout(function () {
$(".NoAutoComplete").val("");
$(".NoAutoComplete").removeClass( "NoAutoComplete" );
}, 1000);
i haven't done to much looking in to this, but you should be able to add a class to all inputs that need not have a value and then delete all values and class at the same time.

What is the clearist notification method for html5 maxlength, or is it possible?

If I have for example inputs...
<input type="text" maxlength="10">
<textarea maxlength="20"></textarea>
How would I tell my user, they "have a limit of..." only when attempting add the 11th or 21st char respectively?
Is there an "html" way of handling this, or do we require javascript.

You could to a certain extent use the pattern attribute. For a maxlength of 10 you would write <input type="text" pattern=".{0,10}" />.
Now you would have to display the error message via CSS with help of the :invalid-selector.
Here is an example.
Edit: This doesn't seem to be working with textarea, though … I am having a look into it right now.

AngularJS validation, binding, etc. not working when using jQuery plugins (eg. autoNumeric)

I have an angular form which was using angular's built-in validation successfully. Take the following markup for example:
<form name="numberForm" novalidate>
<input type="text" required />
<button type="submit">Submit</button>
</form>
When the browser loads, the input field renders like this (unnecessary attributes removed):
<input class="ng-pristine ng-invalid ng-invalid-required" />
If I were to enter a value in the input field, the markup turns into:
<input class="ng-dirty ng-valid ng-valid-required" />
All of this was working great. Then I implemented two jQuery plugins to implement some masking/input formatting for the form: autoNumeric and jQuery.maskedinput. Now, nothing I do will change the original ng-pristine ng-invalid... classes on the input. It also doesn't seem to allow the binding of models to be successful either.
Any ideas?
I tried creating a http://jsfiddle.net/ma44H/3/, but can't seem to figure out how to get it to work.

JQuery and Angular do not cooperate well
Chocolate and Peanut Butter taste great together, but AngularJS and JQuery are a painful mix. We've all tried (with varying success) to accomplish this.
The problem is that JQuery DOM manipulation works outside of AngularJS Digest Cycle. The lesson is usually that using pure Angular is better.
Alternative #1: Angular UI
Try Angular-UI. Set of tools every Angular Developer could use.
Whatever Mask you want to implement can be done with their ui-mask directive:
Want a Date Mask?
<input type="text" ng-model="date" ui-mask="99/99/9999" />
Currency Mask?
<input type="text" ng-model="currency" ui-mask="$99999999.99" />
Phone Mask?
<input type="text" ng-model="phone" ui-mask="1 (999) 999-9999" />
:
See Fiddle
:
Alternative #2: Filters
Angular has built-in filters:
Currency:
$filter('currency')(amount, symbol)
Date:
$filter('date')(date, format)
Insist on using JQuery? Try the jQuery Passthrough directive from the angular-ui toolset. I haven't made use of this directive but it's an intriguing option:
To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note
that the name of the function must be identical. This also works for
normal jQuery commands such as $.fn.slideUp().
To pass parameters use the ui-options attribute. The value will be
evaluated in the $scope context and passed to the function. If
defaults are set, the passed options will extend them. If a string is
passed, the default options will be ignored.
Use the directive name jq for namespacing inside uiJqConfig. Then
sub-namespace options for each function by the name of that function
(exactly as it is passed to ui-jq) so that you don't have to pass
options every time you call the directive.

Angular.js: update binding after manual modification

I'm only starting to dive into angular.js and have found this issue that I can't seem to get around. Consider this simple code:
<input type="text" ng-model="test">
<input type="text" value="{{test}}">
When I write in the first field, the second one is updated nicely. When I write in the second field and then go back to the first one, the binding is not updated anymore. Interestingly though, the HTML attribute value does get updated - it's just not displayed.
Equivalent (at least roughly) code in vanilla javascript does not suffer from this:
<input type="text" id="model">
<input type="text" id="binding">
<script>
var model = document.getElementById("model");
var binding = document.getElementById("binding");
model.addEventListener("keyup",function() {
binding.value = model.value;
});
</script>
Here's a fiddle for you to test both: http://jsfiddle.net/Q6b5k/
Any idea why this happens when using angular.js and how to fix this?
[EDIT] Judging by the initial replies, it appears I have not made it clear. I do not want the second field to update the first one. The binding is to be one-way only, e.g. to allow filtering or even manual corrections (such as automatic creation of a URL alias in a blog post creation form). http://jsfiddle.net/Q6b5k/1/

The value attribute is only used when rendering the initial HTML. After the page load, everything else happens in the Angular Event Loop and therefore you need to do something that event loop can pick up. You can use ng-change for what you are looking to do:
<input type="text" ng-model="test" ng-change="test2=test.toLowerCase();" />
<input type="text" ng-model="test2"">

This happens because {{value}} does not create a binding, it is used for interpolation.
The simplest solution is to use ng-model in both the fields
<div ng-app>
Angular.js:<br>
<input type="text" ng-model="test">
<input type="text" ng-model="test">
</div>
Demo: Fiddle

javascript input focus

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.

Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:

Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.

If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>

Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery

Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>