programing

폼 입력에 포커스가 있는지 확인

newstyles 2023. 3. 5. 09:38

폼 입력에 포커스가 있는지 확인

저는 AngularJS에서 검증을 하고 있는데, 3종류의 오류가 있을 경우 표시되는 div가 있습니다.

필요한 경우 페이지가 빈 값으로 제출된 경우에만 오류 메시지를 표시합니다.

<div class="error" data-ng-show="submitted && mainForm.email.$error.required" />

regex 검증을 위해 실시간 기본 동작 플래그를 지정합니다.

<div class="error" data-ng-show="mainForm.email.$error.pattern" />

제가 직면한 문제는 미니렝스입니다.타이핑하는 동안 보여주고 싶지 않아요.타이핑이 안 끝나서 짜증나요.제출물에도 전시하고 싶지 않아요, 너무 늦은 것 같아요.더 이상 원소의 초점이 맞지 않을 때 보여드리고 싶습니다.

if //mainForm.email.$focus가 존재했다 나는 간단히 이것을 할 수 있었다.

<div class="error" data-ng-show="mainForm.email.$error.minlength && 
!mainForm.email.$focus"/>

이런 종류의 수표를 발행할 수 있는 방법이나 인출되지 않은 대안을 아는 사람?

감사합니다!

네, 포함되었습니다.
이 목적으로 ngFocus 및 ngBlur를 사용할 수 있습니다.

여기 암호가 있습니다.

<form name="mainForm">
    <span ng-show="mainForm.email.$error.pattern && !focus">error here</span>
    <input name="email" ng-pattern="..." ng-focus="focus=true" ng-blur="focus=false" type="text" />
</form>

ngFocus 및 ngBlur가 식을 취하고 ngShow가 실제 평가 시 표시됨

ModelOptions, debounce 및 updateOn은 모델 변경 트리거 이벤트를 지연시키거나 DOM 이벤트에서 변경을 트리거할 수 있습니다.https://docs.angularjs.org/api/ng/directive/ngModelOptions

페이지의 예를 확인합니다.

<div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ updateOn: 'blur' }"
           ng-keyup="cancel($event)" /><br />

    Other data:
    <input type="text" ng-model="user.data" /><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>

다른 간단한 옵션은 다음과 같습니다.

 <input type="text"
        name="searchText"
        ng-model="searchText"
        ng-blur="searchIsInActive()"
        ng-click="searchIsActive()"                  
        placeholder="Search">

언급URL : https://stackoverflow.com/questions/25109047/determine-whether-form-input-has-focus