如何autocomplete在主要浏览器中禁用特定input(或form field)?
我正在使用Angular和Bootstrap.以下是供参考的代码:
<form name="newUserForm" ng-submit="add()" class="" novalidate>
<input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td>
<button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">Add</button>
</form>
Run Code Online (Sandbox Code Playgroud)
Bootstrap具有无效字段的样式,形式为input:invalid {.... }; 当田地空无一人时,这些就开始了.现在我也通过Angular进行了一些模式匹配.当":invalid"关闭但是".ng-invalid"打开时,这会产生奇怪的情况,这需要我为".ng-invalid"类重新实现bootstrap CSS类.
我看到两种选择,但两者都有问题
Angular-Bootstrap指令不包括样式.
我有一个简单的登录表单,除非你使用Chrome的自动完成功能,否则只能使用peachy.
如果您开始输入并使用自动完成功能并自动填充密码,则我的angularjs模型没有任何密码值.
我试图通过在表单上设置属性来关闭自动完成,autocomplete="off"但似乎没有任何效果.
我该怎么做:1.如果有人使用Chrome的自动完成功能,请确保我能获得价值吗?2.禁用Chrome的自动完成功能?
<form class="form-signin" name="form" ng-submit="login()" autocomplete="off">
<h3>Login</h3>
<input type="email" name="email" class="form-control" placeholder="Email address" ng-model="user.email" required autofocus>
<input type="password" name="password" class="form-control" placeholder="Password" ng-model="user.password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
Run Code Online (Sandbox Code Playgroud) 我正在开发一个以登录门户开头的Angular应用程序.我在登录屏幕上使用以下模板:
的login.html
<form method="post" name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
<fieldset>
<p>
<label>Username</label>
<input type="text" placeholder="e.g. JohnDoe" [(ngModel)]="model.username" #username="ngModel"
name="username" required/>
</p>
<p [ngClass]="{ 'has-error': f.submitted && !password.valid }">
<label>Password</label>
<input type="password" placeholder="Password" name="password" [(ngModel)]="model.password"
#password="ngModel" required/>
</p>
<p>
<input type="submit" [disabled]="loading" class="btn" value="Login">
</p>
</fieldset>
</form>
Run Code Online (Sandbox Code Playgroud)
不幸的是,每当用户登录时,Chrome的密码管理器都不会要求存储凭据.像Lastpass这样的密码管理器确实提供存储它.我有什么可以改进来解决这个问题?
我是AngularJS的新手,我正在尝试创建一个简单的表单.如果表单无效(我没有填写所有字段),我将禁用"提交"按钮.当启用自动填充功能时,除Chrome之外,它工作正常.字段已预先填写,但仍然禁用提交按钮,直到我点击页面上的某处(任何位置,即输入字段,空白空间等).
我不确定如何提供复制Chrome场景的工作示例,但这里是ng-disabled的JSFiddle(以及下面的代码).
<div ng-app="">
<form name="myForm">
<label for="username">Username</label>
<input type="text" id="username" name="username" ng-model="formData.username" required />
<span ng-show="myForm.username.$error.required && myForm.username.$dirty">Required</span>
<label for="password">Password</label>
<input type="password" id="password" name="password" ng-model="formData.password" required />
<span ng-show="myForm.password.$error.required && myForm.password.$dirty">Required</span>
<br />
<button type="submit" class="btn" ng-disabled="myForm.$invalid">Submit</button>
</form>
</div>
Run Code Online (Sandbox Code Playgroud)
这是真实的截图:
因此我对chrom自动填充脚本存在一般性问题,我的猜测是,对于所有自动填充脚本,这将是一个问题.
使用自动填充设置输入字段时,如何使用ng-model值注册它们.例如(html,ui,angular javascript)
username: <input ng-model="username"/>, username: [ ], $scope.username = ""
Run Code Online (Sandbox Code Playgroud)
如果我输入Blanka,我明白了
username: <input ng-model="username" value="Blanka"/>, username: [Blanka], $scope.username = "Blanka"
Run Code Online (Sandbox Code Playgroud)
但是使用铬自动填充它似乎正在做
username: <input ng-model="username"/>, username: [Blanka], $scope.username = ""
Run Code Online (Sandbox Code Playgroud)
每当有自动填充数据时,我如何将值注入ng-model.
我在ios Safari中输入时遇到了一个奇怪的问题, 如下所示。
输入是angular应用程序的一部分,对ng-length和ng-pattern有一些基本检查。最初,当您键入所有字符时,都会显示出来,但是如果您稍微浏览一下页面,例如点击,向上滚动和向下滚动,然后再次点击,则只显示您键入的前两个字母,其余的将显示看不见,但光标仍会移动。
输入也使用自定义的Web字体,但是删除它并不能解决问题。
这是一个已知的错误,是否有解决方法?
我在用于登录的部分页面中有以下代码...
<div class="container">
<form autocomplete="on" data-ng-submit="checkCredentials()" class="form-signin">
<h2 class="form-signin-heading">Login page</h2>
<label for="email"> <b>User e-mail</b> </label>
<input required autocomplete="on" name="email" type="text" data-ng-model="modelLogin.email" class="input-block-level" placeholder="Email address">
<label for="pass"> <b>Password</b> </label>
<input required autocomplete="on" name="pass" type="password" data-ng-model="modelLogin.password" class="input-block-level" placeholder="Password">
<button style="margin-bottom:1em" class="btn btn-large btn-primary" type="submit">Log in</button>
</form>
</div>
Run Code Online (Sandbox Code Playgroud)
...这是我的唯一主页(index.html)中包含的ng:
<body data-ng-controller="controllerLogin">
<div data-ng-include="getMainpageBasedOnLoginStatus()">
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
...与getMainpageBasedOnLoginStatus()函数返回适当的路径要么对泛音/ loginPage.html上面所示或所述的partials/mainApplicationPage.html(我的主要的应用程序的入口点).通过ng-submit完成的checkCredentials()调用执行webservice调用以获取登录成功/失败,并在全局模型变量中进行正确更新 - 以便后续调用getMainpageBasedOnLoginStatus()返回'ok-you-are-登录页面(partials/mainApplicationPage.html).
此登录方案不能被黑客入侵,因为即使客户端代码以某种方式更改为指向主应用程序部分而不是登录部分,服务器端也将无法正常运行(Web服务请求将无法正常运行并返回406错误).
一切都很好 - 它的工作原理.除了...自动填充.
登录/密码字段既不会自动完成,也不会自动填充Chrome 29.在Firefox 23中也是如此:登录/密码字段未自动填充,但登录名(仅登录名,而不是密码名!)是自动填充的 - …
angularjs ×6
autocomplete ×3
forms ×2
validation ×2
angular ×1
autofill ×1
browser ×1
html ×1
ios ×1
javascript ×1
model ×1
safari ×1