Enter 키를 가두지만 브라우저의 자동 완성 제안을 선택할 때는 아닙니다.

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

  •  22-07-2019
  •  | 
  •  

문제

페이지에 일부 텍스트 상자가 있고 사용자가 입력 할 때 링크를 클릭하고 싶습니다.

JavaScript를 사용하여 Enter 버튼을 쉽게 덫을 놓을 수 있습니다 (13 in을 찾아 event.keyCode 그리고 event.which), 그러나 브라우저의 자동 완성 기능이 시작될 때 문제를 겪고 사용자가 입력하려는 것을 제안합니다. 우리는 사용자가 종종 Enter를 누르면 탭이 아닌 브라우저의 제안을 수락합니다. 이렇게하면 링크가 즉시 클릭되면 사용자가 혼동되는 반면 여전히 다른 필드에 텍스트를 입력하려고했습니다.

나는 여기에 양식과 제출 버튼을 사용하는 것이 더 낫다는 것을 알고 있지만, 여러 가지 이유로 실용적이지 않습니다.

jQuery를 사용하고 있으므로 jQuery 솔루션을 자유롭게 제공하십시오.

도움이 되었습니까?

해결책

사용자는 자동 완료 텍스트 중 하나를 선택하려면 항상 다운 키를 누르야합니다. 다운 키를 누를 때 변수를 설정 한 다음 ENTER PRESS를 수행하면 변수를 확인하십시오. 변수가 설정된 경우 링크 클릭 함수를 수행하지 않아야합니다. 그렇지 않으면 정상으로 수행하십시오.

다른 팁

허용 된 답변에 Tuanvt의 아이디어를 사용하여 작업을 수행하는 jQuery 플러그인을 썼습니다.

사용자가 위, 아래, 페이지 업 및 페이지 다운 키를 누르면 자동 완성 상자에있을 때를 알려줍니다. 다른 모든 열쇠는 그들이 남긴 것을 암시합니다.

이 규칙 만 텍스트 상자에만 적용해야합니다. 다른 모든 입력 요소는 정상적으로 행동합니다.

Opera는 이미 내가 달성하려는 일에 대해 꽤 좋은 일을하고 있으므로 해당 브라우저에서 규칙을 시행하지 않습니다. 그렇지 않으면 사용자가 Enter를 두 번 누르야합니다.

IE6, IE7, IE8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, Opera 10.00에서 테스트.

jQuery.com에서 사용할 수 있습니다 SafeEnter 플러그인. 편의를 위해 릴리스 1.0 코드는 다음과 같습니다.

// jQuery plugin: SafeEnter 1.0
// http://plugins.jquery.com/project/SafeEnter
// by teedyay
//
// Fires an event when the user presses Enter, but not whilst they're in the browser's autocomplete suggestions

//codesnippet:2e23681e-c3a9-46ce-be93-48cc3aba2c73
(function($)
{
    $.fn.listenForEnter = function()
    {
        return this.each(function()
        {
            $(this).focus(function()
            {
                $(this).data('safeEnter_InAutocomplete', false);
            });
            $(this).keypress(function(e)
            {
                var key = (e.keyCode ? e.keyCode : e.which);
                switch (key)
                {
                    case 13:
                        // Fire the event if:
                        //   - we're not currently in the browser's Autocomplete, or
                        //   - this isn't a textbox, or
                        //   - this is Opera (which provides its own protection)
                        if (!$(this).data('safeEnter_InAutocomplete') || !$(this).is('input[type=text]') || $.browser.opera)
                        {
                            $(this).trigger('pressedEnter', e);
                        }
                        $(this).data('safeEnter_InAutocomplete', false);
                        break;

                    case 40:
                    case 38:
                    case 34:
                    case 33:
                        // down=40,up=38,pgdn=34,pgup=33
                        $(this).data('safeEnter_InAutocomplete', true);
                        break;

                    default:
                        $(this).data('safeEnter_InAutocomplete', false);
                        break;
                }
            });
        });
    };

    $.fn.clickOnEnter = function(target)
    {
        return this.each(function()
        {
            $(this)
                .listenForEnter()
                .bind('pressedEnter', function()
                {
                    $(target).click();
                });
        });
    };
})(jQuery);

모든 브라우저의 표준은 아니지만 공통 브라우저에서 작동하지만 확인란에서 자동 완성을 설정해보십시오.

<input type="text" autocomplete="off" />

jQuery는 훌륭하고 모두 간단한 JavaScript를 사용하지 않는 이유는 무엇입니까?

function submit_on_enter(e) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = (e.keyCode ? e.keyCode : e.which);
    else return true;

    if (keycode == 13) {
        if (window.previousKeyCode) {
            // down=40,up=38,pgdn=34,pgup=33
            if (window.previousKeyCode == 33 || window.previousKeyCode == 34 ||
                window.previousKeyCode == 39 || window.previousKeyCode == 40) {
                    window.previousKeyCode = keycode;
                    return true;
            }
        }
        submit_form();
        return false;
    } else {
        window.previousKeyCode = keycode;
        return true;
    }
}

KeyUp 이벤트에서 Enter Key를 감지 할 때까지 Enter Key Key Unk Keyup Enter Key in KeyUp 이벤트가 완료됩니다.

키 다운에서 Enter 키 감지 및 DO 작업은 자동 완성 기능을 방해합니다.

이것은 나를 위해 작동합니다 :

$('input').keypress(function(e) {
    if(e.which == 13) {
        if(this.value)
        {
            $("#submitbutton").click();
        }
    }
});

새로운 HTML5 양식 필드 유형을 사용하는 경우 다음과 같이 Teedyay의 코드를 변경할 수 있습니다.

case 13:
                    // Fire the event if:
                    //   - we're not currently in the browser's Autocomplete, or
                    //   - this isn't a textbox, or
                    //   - this is Opera (which provides its own protection)
                    if (!$(this).data('safeEnter_InAutocomplete') || !$(this).is('input([type=text],[type=email],[type=number],[type=search],[type=tel],[type=url])') || $.browser.opera)
                    {
                        ...

새 입력 유형에 유의하십시오.

창 또는 특정 DOM 요소에 키 프레스를 갇히고 있는지 확실하지 않습니다. 당신은 후자를해야합니다 (예 : form 요소), 이벤트 핸들러에서 이벤트 객체를 살펴보고 행사의 원점인지 결정하십시오. 이것이 자동 완성 된 텍스트 필드라면 return false;.

jQuery를 살펴보십시오 .keypress() 이벤트 핸들러 및 the event.target 이벤트 객체의 속성.

나는 같은 문제에 직면했고 완벽하지는 않지만 더 간단하다고 생각하는 다른 접근법을 사용했습니다. 자동 완성을 만들 때 선정 이벤트의 현재 시간을 설정 한 다음 조치를 취하기 전에 비교합니다.

$('#completer').autocomplete({
  source: ['First', 'Last'], delay: 0, minLength: 0,
  select: function(ev, ui) {
    $(ev.target).data('lastAutocompleteSelectTimestamp', new Date().getTime())
  }
})

$(document).on('keydown', '#completer', function(ev){
  if (ev.which != 13) return
  var lastAutocompletionTime = $(ev.currentTarget).data('lastAutocompleteSelectTimestamp')
  if (!lastAutocompletionTime || (new Date().getTime() - lastAutocompletionTime) > 100)
    alert('Enter pressed outside autocomplete context')
})
<html>
<head>
  <link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
</head>
<body>
  <input id=completer type=text />
</body>
</html>

또 다른 (더 안전한) 접근법은 다음과 같습니다 사용 keyup 그리고 keydown 가치 변경을 감지하는 이벤트.

자동 완성은 값을 설정합니다 ~ 후에 그만큼 keyDown 이벤트. 두 사건이 모두 관찰되면 다음은 다른 솔루션보다 훨씬 더 안정적입니다.

var tempValue;
// fire when enter is 1. pressed and 2. released
function handlerEnter(type){
     // save the value for comparison
     if(type == 'keyDown'){
         tempValue = document.activeElement.value;
         return null; // quit
     }

     // quit when the value changed in between keyDown & keyUp
     if(type == 'keyUp' && tempValue != document.activeElement.value){
         return null;
     }

     // autocomplete wasn't used
     doStuff();
}

확인하고 싶을 수도 있습니다 Document.ActiveElement 입력입니다. 자유롭게 사용하십시오 내 사악한 프로토 타입 확장.

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