如何启用其他文本字段单击文本字段
How to enable text fields on other text field click?
我使用angularjs为我的表单，作为表单加载我想禁用一些字段，点击文本字段禁用字段后应该启用。我为此奋斗了很多，请帮助我解决这个问题。这是我的HTML
<!doctype html>
<html lang="en" ng-app="signup">
<head>
<title>Sign Up</title>
<jsp:include page="/WEB-INF/pages/app/cmn/cmnIncludes.jsp" />
<%-- Including login_controller.js file
- Date: 30Aug2016 | Author(s): Abhay Sharma --%>
<script type="text/javascript" src="/static/app/components/signup/signup_controller.js"></script>
<%-- Including login_service.js file
- Date: 30Aug2016 | Author(s): Abhay Sharma --%>
<script type="text/javascript" src="/static/app/components/signup/signup_service.js"></script>
<%--Including location.js --%>
<script type="text/javascript" src="/static/assets/js/location.js"></script>
<%--Loading the library for Google place Autocomplete --%>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAD6LkAYd9yRpx5YlhRaRYbJClMutkxvpg&libraries=places&callback=initAutocomplete"
async defer></script>
</head>
<body class="index-page signup-page">
<!-- Navbar -->
<jsp:include page="/WEB-INF/pages/app/cmn/header.jsp" />
<!-- end navbar -->
<!-- content: signup -->
<div class="wrapper headerMargin" ng-controller="signupController">
<div class="header header-filter" style="background-image: url('../assets/img/city.jpg'); background-size: cover; background-position: top center;">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-offset-2">
<div class="card card-signup">
<form class="form" method="" action="" name="signupForm">
<div class="header header-primary text-center">
<h4>Sign Up</h4>
</div>
<div class="content">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" class="form-control" placeholder="Person Name" ng-model="user.personName" required>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">business</i>
</span>
<input type="text" class="form-control" placeholder="Firm Name" ng-model="user.firmName" required>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">email</i>
</span>
<input type="email" class="form-control" placeholder="Email" ng-model="user.email" required>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" placeholder="Password" class="form-control" ng-model="user.password" required/>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">call</i>
</span>
<input type="tel" class="form-control" placeholder="Phone Number" ng-model="user.number" required />
</div>
<div class="input-group" id="locationField">
<span class="input-group-addon">
<i class="material-icons">place</i>
</span>
<input type="text" id="autocomplete"class="form-control" placeholder="Location" ng-model="user.place" onFocus="geolocate()" required="required" />
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Street Address 1" id="street_number"ng-model="streetAddr1" required="required" />
</div>
<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Street Address 2" id="route"ng-model="streetAddr2" required="required" />
</div>
<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="City" id="locality" ng-model="city" required="required" />
</div>
<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="State" id="administrative_area_level_1" ng-model="state" required="required" />
</div>
<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Zip Code" id="postal_code"
ng-model="zip" required="required" />
</div>
<div class="input-group">
<!-- <span class="input-group-addon">
<i class="material-icons">home</i>
</span> -->
<input type="text" class="form-control" ng-disable=""
placeholder="Country" id="country" ng-model="country" required="required" />
</div>
</div>
</div>
<!-- If you want to add a checkbox to this form, uncomment this code
<div class="checkbox">
<label>
<input type="checkbox" name="optionsCheckboxes" checked>
Subscribe to newsletter
</label>
</div>
-->
</div>
<div class="footer text-center">
<a href="#pablo" class="btn btn-simple btn-primary btn-lg"
ng-click="signup()" ng-disabled="signupForm.$invalid">Signup</a>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- footer -->
<jsp:include page="/WEB-INF/pages/app/cmn/footer.jsp" />
<!-- end footer -->
</div>
</div>
<!-- end content -->
</body>
</html>我想禁用所有字段后的地方和用户关注的地方，所以禁用字段应该启用。
我将给你一个非常简单的例子来解决你的问题。如果您禁用输入文本框，那么它将不会捕获事件。您可以做一件事:将input元素放入div中，然后调用函数启用它。
我已经为此写了代码，请看
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Click to enable
<div ng-click="enableMe()" >
<input type="text" ng-model="name" id="inputbox" disabled >
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.enableMe = function (){
var element = angular.element( document.querySelector( '#inputbox' ) );
element.removeAttr("disabled");
}
});
</script>
</body>
</html>
尝试:
<button ng-click="enabled = true">
<input ng-disabled="!enabled"/>
，但这只适用于表单元素，如果你想禁用链接，你需要使用这个:
<a ng-click="enabled && fun()">foo</a>
相关文章：
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 当设置addFromAutocompleteOnly时，剩余文本将保留在输入字段中
- 使用jquery将输入字段转换为文本
- 如何从查询字符串中的输入字段发回文本
- 表单输入字段随着溢出的文本而增长
- 使用单个文本框向多个字段添加严格搜索
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 使用jQuery的输入字段文本换行
- 向使用jQuery加载DOM后添加的字段添加不受限制的文本输入DatePickers
- 当用户单击按钮(在光标位置）时，在输入字段中添加一个文本字符串
- 如何根据文本长度立即显示和隐藏字段?-JQuery
- 如何使文本、数字和日期html输入字段以一致的方式支持Ctrl+Z(撤消）
- 模拟文本输入字段上的退格键
- 输入字段中的可持续文本
- 未获取文本输入字段的值
- 没有文本安全性的密码字段
- 将禁用的输出字段更改为带前缀的文本
- 为什么 react 将输入[类型=“文本”] 字段设为只读，除非我提供 onChange 回调
- 使用SAPUI5中的“文本”字段显示正确的“日期”
- Kendo，如何将MVVM文本:字段绑定到远程DataSource
