Klawisz spacji wciśnięty na html elementu kotwiczącego nie wyzwala zdarzenia kliknięcia. Jak na to pozwolić?

Question

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"/><span>Save & Add Another</span></a> 

Mam powyższy element zakotwiczenia na mojej stronie. Ten ma styl wyglądający jak przycisk i dlatego będzie traktowany jako przycisk. Problem jest następujący. Użytkownik nie chce używać myszy, aby go kliknąć lub osiągnąć, ale użyje tego przycisku do podświetlenia tego elementu kotwicy, a następnie kliknie przycisk "spacja" lub "powróć". Jeśli użytkownik natrafi na klawisz spacji lub klawisz powrotu, powinienem móc wywołać funkcję JavaScript. Próbowałem zdarzenia onkeypress, a to nie pomaga. Dowolny pomysł?

Answer 1

Po pierwsze: wystąpił problem z kodem HTML. Używasz krótkiej składni dla A - co oznacza, że ​​tekst nie jest częścią zawartości A. W wielu przeglądarkach nie podoba się krótka składnia tagów A - nie twoja wina, ale naszym obowiązkiem jest być bardziej tolerancyjnym niż przeglądarki.

Oto poprawiona wersja:

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"><span>Save & Add Another</span></a> 

zależności od przeglądarki i DOCTYPE istotne jest, czy nazwa wydarzenie to wszystko małe czy nie. Po prostu coś do znalezienia.

Wreszcie, domyślnie Twoje zdarzenie onclick będzie uruchamiane tylko w przypadku kliknięć, a Enter - nie w przypadku spacji. Wiele przeglądarek traktuje klawisz spacji jako obiekt stronicowania. Jeśli jesteś pewien, że chcesz przechwytywać zdarzenia spacji na tym A i traktować je jak Enter, musisz zdefiniować zdarzenie naciśnięcia klawisza, które wyszuka spacje. Tak:

function addNewKeys(event) { 
    if(!event) var event = window.event; // cross-browser shenanigans 
    if(event.keyCode === 32) { // this is the spacebar 
     saveTdsAddNew(event); 
    } 
    return true; // treat all other keys normally; 
} 

(Pamiętaj, aby powiązać tę nową funkcję do onkeypress tego A.)

Zauważ, że jestem przechodzącej event do funkcji saveTdsAddNew. Dzieje się tak, ponieważ myślę, że programy obsługi zdarzeń zwykle otrzymują obiekt event jako argument, więc zachowuje istniejący wzorzec. Od event można odzyskać element, który został kliknięty/wpisany, itp.

Answer 2

Nie próbowałem tego zrobić osobiście, ale założę się, że to trochę bardziej skomplikowane niż ustawienie zdarzenia keypress w hiperłączu.

Wyobrażam sobie, co musisz zrobić, to obsłużyć naciśnięcie klawisza na poziomie dokumentu, w ramach tego sprawdzenia sprawdzić, czy hiperłącze jest skupione, a następnie wykonać kod, który chcesz.

Warto również oddzielić zdarzenie click on the HTML.