홈>
양식 입력이 있습니다. 페이지가로드되면 입력에 "ng-readonly = true"속성이 있으며 데이터 만 표시합니다.
두 번 클릭 (ng-dblclick)하면 "ng-readonly"속성이false로 변경되고 입력을 편집 할 수 있습니다. 이 모든 것에 대해, 그것은 정확하게 작동하고 있습니다. 그러나 데이터가 (ng-model = "school.fax") 행 데이터가 비어 있으면초점을 수행하며 입력을 클릭하여 초점을 맞추고 쓰기를 시작해야합니다.
데이터가비어 있지 않은(ng-model = "school.fax"에 값이 있고 서버 API에서 값을 가져 오는 경우) 발생하지 않으며이 경우 올바르게 작동합니다
질문 : 입력 행을 클릭하지 않고 빈 입력에 집중하고 쓰기를 시작하려면 어떻게해야합니까?
코드 :
HTML
<label>
<input class="inputs"
type="text"
ng-readonly="!edit_school_fax"
ng-dblclick="editSchoolFax(true)"
ng-model="school.fax"/>
</label>
JS
$scope.editSchoolFax = function(edit) {
$scope.edit_school_fax = edit;
};
FYI 시도했지만 작동하지 않습니다.
- 입력 내부에 "자동 초점"추가 와이즈 비즈
- 이 솔루션과 같은 지시문을 사용하십시오 : LINK
<input autofocus
- 답변 # 1
- 답변 # 2
focus
를 추가하는 사용자 지정 지시문 사용 ngModelController에 대한 메소드 :
사용법app.directive("inputFormFocus", function() { return { require: "ngModel", link: postLink }; function postLink (scope, elem, attrs, ngModel) { console.log("postLink"); console.log(ngModel); ngModel.focus = function() { elem[0].focus(); } } })
<form name="form1"> <input input-form-focus name="fax" class="inputs" type="text" ng-readonly="!edit_school_fax" ng-dblclick="editSchoolFax(true)" ng-model="school.fax"/> </form>
데모$scope.form1.fax.focus();
angular.module("app",[]) .controller("ctrl",function($scope){ $scope.editSchoolFax = function(edit) { $scope.edit_school_fax = edit; }; $scope.school = { fax: "555-100-1234" }; $scope.faxFocus = function() { $scope.edit_school_fax = true; $scope.form1.fax.focus(); }; }) .directive("inputFormFocus", function() { return { require: "ngModel", link: postLink }; function postLink (scope, elem, attrs, ngModel) { ngModel.focus = function() { console.log(attrs.name + " focus"); elem[0].focus(); } } })
<script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app" ng-controller="ctrl"> <form name="form1"> <input input-form-focus name="fax" class="inputs" type="text" ng-readonly="!edit_school_fax" ng-dblclick="editSchoolFax(true)" ng-model="school.fax"/> </form> <button ng-click="faxFocus()">Focus and Edit</button> </body>
관련 자료
- node.js - 채워진 후 문자열 변수가 비어 있습니다
- python - 목록 요소 목록을 차례로 비우는 방법은 무엇입니까?
- node.js - 급행 매개 변수를 통해 보낸 후지도가 비게됩니다
- docker - 포드 초기화 시간 후 PVC가 비게 됨 GCP 손실 + 스토리지 문제 발견
- r - 기능이 비어있는 새 데이터 프레임
- javascript - React JS에서 onSubmit 후 양식 필드를 비우는 방법
- php - 쿼리 후 내 변수가 비어 있거나 null인지 확인하는 방법 - laravel
- python - 작업을 추가 한 후 빈 목록을 얻습니다
- c# - wpf - listview를 클릭 한 후 포커스 설정
- javascript - MVC 컨트롤러에서 jquery 게시물로 게시 된 후 문자열이 비어 있습니다
- javascript - forEach 이후 함수는 빈 배열을 반환했습니다
- identityserver4 - ASPNET Core 31에서 ASPNET 50으로 업그레이드 한 후 UserClaims가 비어 있음
- swift - 연락처에서 주소 자동 완성을 선택한 후 iOS UITextField 텍스트 필드가 비어 있음
- command line - 배관 후 반전 된 파일이 비어 있습니다
- content security policy - phpmyadmin은 네임 서버를 Cloudflare로 변경 한 후 빈 로그인 페이지를 표시합니다
- reactjs - 각 키 입력 후 포커스를 잃는 입력 컨트롤
- Big Sur - 빅서 - 절전 모드에서 깨어 난 후 앱에 초점을 맞추거나 마우스/키보드 입력을 할 수 없습니까?
- c++ - fstream으로 쓴 후 파일에서 읽습니다항상 비어있다
- spark streaming - 저장 후 Ignite cache가 비어 있습니까?
관련 질문
- javascript : 사용자 지정 지시문에 HTML 전달
- javascript : 새로 고침이 아닌 브라우저 탭을 닫을 때 로컬 저장소를 지워야 합니다.
- javascript : 단일 페이지의 html 카드에 있는 여러 필드
- javascript : 사용자가 angularjs를 사용하여 입력 상자에 양수만 입력할 수 있도록 허용
- javascript : 복잡한 프로젝트를 Angular 1.5에서 2로 마이그레이션하는 방법은 무엇입니까?
- JavaScript, 클라이언트에서 서버로 이벤트
- javascript : 명령 프롬프트에서 Angular js 프로젝트 시작
- javascript : 오류: '처리되지 않은 약속 거부: TypeError: 정의되지 않은 속성을 읽을 수 없습니다.
맞춤 지시문 추가