jqueryui 의 datepicker 불 입력의 흐리게 전달하기 전에 날짜,피해/해결 방법?

StackOverflow https://stackoverflow.com/questions/1814292

문제

나는 몇 가지 유효성 검사에는 텍스트 입력에 바인딩을 흐림의 이벤트입니다.가 datepicker 에서 이 필드(이하 버전에서 jqueryui 의),그래서 당신은 클릭하면,현장 datepicker 보여줍니다,당신은 클릭하여 날짜와 그것을 채우는 날짜 필드 datepicker 않습니다.그러나,오른쪽 날짜 이전에 입력했을 것 같은 입력 필드를 얻을 흐리게 발생한 어떤 이유입니다.그것은 다음과 같 초점가에서 멀리 입력하기 전에 날짜가 채워집니다.그래서 나의 검증을 얻을 발사에서 오른쪽 지점을 때 사용자가 선택한 날짜,날짜 전에 실제로 그것의 방법을 만들 때,그것이 안됩니다.해야한 후 실행 날짜를 넣어 가져옵니다.사람이 왜 흐림이 일어나고 있는 시점에서 또는 어떻게 작업을 수 있습니다.

도움이 되었습니까?

해결책

사용자가 입력 필드 밖에서 클릭하면 (날짜를 선택하려면) 입력 필드가 흐려집니다. 그 주위에 아무 방법이 없습니다. 따라서 Blur에서 유효성 검사를 트리거하는 대신 DatePicker의 OnSelect 콜백을 사용하십시오.

$('.selector').datepicker({
    onSelect: function(dateText) { /* validation here */ }
});

Onblur-Events를 유지하려면 유효성 검사를 연기하여 유효성 검사가 발생하기 전에 DatePicker가 필드를 작성할 수 있도록 유효성 검사를 연기 할 수 있습니다.

$('#myform input').blur(function () {
    setTimeout(function () { /* validation here */ }, 1);
});

Settimeout을 사용하여 동시성 문제를 처리하는 것은 해킹처럼 보일 수 있지만 Javascripts 싱글 스레드 특성으로 인해 매우 잘 작동합니다. jQuery-fame의 John Resig는 그것에 대해 이야기합니다 이 블로그 포스트.

다른 팁

당신은 이것을 시도 할 수 있습니다 :

$(".date-pick").datepicker({
...
onSelect: function() {
this.focus();
},
onClose: function() {
this.blur();
}
...

키보드를 일관되게 얻을 수있는 유일한 방법을 찾았고 피커 선택 이벤트가 작동하는 유일한 방법은 다음 코드와 관련이 있습니다.

 $(".date-picker")
            .datepicker("option", "onSelect", function (dateText, inst) {
                // User Method
            })
            .change(function () {
                // User Method
            });

블러 이벤트 만 사용하는 데있어 문제는 (선택할 때) DatePicker가 값이 전달되기 전에 입력에서 블러 이벤트를 시작한다는 것입니다.

위의 Magnars 답변은 매우 좋습니다. Progeny에 대한 더 많은 정보를 제공하는 것만 여기에 Blur에 대한 검증을하는 검증 프레임 워크와 잘 어울리는 접근법도 있습니다. 실제로 Document.ready/Pageload (유효성 검사 패턴)의 유효성 검사에 의해 설정된 Blur 이벤트를 풀고 OnClose DatePicker 옵션에 다시 넣습니다. DatePicker Close 이벤트는 DatePicker가 정보를 필드로 전달한 후 발생하므로 해당 시점에서 Blur 유효성 검사가 실행되는 것은 괜찮습니다. 이렇게하면 유효성 검사 코드 자체에서 필드에 특별한 일을 할 필요가 없습니다. 두 가지 접근 방식은 아마도 다른 사람 이이 일을 발견하면 무엇을하고 있는지에 적용 할 수 있습니다.

$('#datefield').datepicker(
{beforeShow: function(input) {
                             $(input).unbind('blur');
             },
 onClose: function(dateText, inst) {
                             $(this).validationEngine();this.focus();this.blur() }
});

(내 프레임 워크에서 '.ValidationEngine ()' '' '유효성 검사 처리기를 등록하는 것입니다)

허용 된 솔루션에 약간의 어려움이 있었기 때문에이 스레드를 부딪칩니다.

DatePicker의 'OnClose'이벤트가 발사 될 때 'Change'이벤트를 트리거하는 것이 가장 쉽다는 것을 알았습니다. 이것은 입력 요소의 변경 이벤트가 항상 발사되도록합니다.

$('#my_element').datepicker({
    onClose: function() {
        $(this).trigger('change');
    }
});

아무것도 바뀌지 않았을 때 발생하기 때문에 이것은 어리석은 것처럼 보일 수 있습니다. 그러나 DatePicker의 'OnSelect'보다 더 안정적으로 작동하며 DatePicker 이벤트 전에 Focusout 또는 Blur 이벤트가 발생하는 문제를 피하는 데 도움이되었습니다.

jQuery에서 사용자 정의 이벤트를 만들고 텍스트 상자에 바인딩하십시오. 그 후 OnClose 이벤트의 이벤트가 DatePicker의 이벤트를 트리거합니다. 텍스트 상자에서 벗어나면 사용자 정의 이벤트가 시작됩니다.

$("inputText").bind('CustomEventName',function(){//your validate method code});

그리고 datepicker에서

$("#inputText").datePicker({onClose:function(){ $(this).trigger('CustomEventName')});

나는 당신과 같은 문제가 및 Magnar 의 대답은 도움이되지 않았지만 완전히 답변 문제입니다.

을 식별 근본적인 원인을 확인해야 합니다.조치의 사용자와 상호 작용하는 달력을 제거에서 초점을 입력 분야이다.이(의 경우에 jquery 눈에 거슬리지 유효성)의 원인이됩니다 onBlur 이벤트하는 화재 유발,검증하는 입력 분야이다.이 시점에서 가치는 여전히 이전 값을 때까지,사용자가 선택한 무언가이다.

따라서,건축에 Magnar 의 대답은 그는 당신이 필요 유효성을 다시 입력 필드 onChange 의 달력이 있습니다.가장 확실한 방법은 통화 $("form").valid(), 그러나 이 유효성을 확인 전체 형태이다.

더 좋은 방법은 유효한 입력 필드에 연결된 날짜 선택,그리고 실행할 수 있는 이렇게 함으로써:

$('#myform input').blur(function () {
    var that = this;
    setTimeout(function () {
        $(that).trigger("focus").trigger("blur");
    }, 100);
});

이제 당신의 입력이 검증되기 때문에,당신은 가짜 클릭하는 사용자의 입력 분야이다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top