Chciałbym rozpocząć akcję (włączanie autouzupełniania), gdy użytkownik wpisze "@". Jednak nie wiem, jak to zrobić poprawnie. Mam jQuery dostępne.Wykryj wprowadzoną postać za pomocą JavaScriptu

Zazwyczaj na klawiaturze QWERTY, to jest tak:

$('textarea').live('keydown', function(e) { 
    if (e.which === 50) { 
    console.log('@ has been entered.'); 
    } 
});

Jednak to nie działa poprawnie na klawiaturze AZERTY. KeyCode = 50 odpowiada kluczowi é~/2. Aby wpisać "@" w klawiaturze AZERTY, jest to klawisz AltGr + à@/0.

Edytuj: Nie było jasne. Autouzupełnianie rozpoczyna się po wprowadzeniu znaku @ i dopiero po tym. Przykład, gdy ktoś wejdzie w "Hello @", to się zacznie, ale gdy napisze "Witaj, nic innego", komplet niczego nie zrobi. Przykład: http://mrkipling.github.com/jQuery-at-username/ (działa tylko na klawiaturze QWERTY).

Źródło

2012-08-26 jcisio

D'oh, ja nie zauważyłem co StackOverlow mieć dokładnie to, co muszę z funkcji autouzupełniania nazwa_użytkownika w komentarzu. – jcisio

Zastosowanie keypress zamiast keydown. Podczas gdy keydown odnosi się do każdego naciśnięcia klawisza, keypress odnosi się do przetłumaczonych znaków, więc na przykład a może być różny od a podczas naciskania klawisza Shift, składać znaki działać, martwe klawisze działają, a inne różnice w mapowaniach klawiatury są obsługiwane .

Źródło

2012-08-26 22:07:04

Dokładnie! Zdarzenie 'keypress' wykrywa poprawnie kod' @ '(64). Myślę, że będę musiał oddzielić dwa zdarzenia: jeden do wykrycia znaku '@ ', inny za pomocą' keydown', aby wykryć klawisze strzałek dla "kompletnej" części. – jcisio

Sam zrobiłem to połączenie w autouzupełnianiu. –

@jcisio To ma sens. Jednak nie jestem pewien co do zunifikowanej obsługi przeglądarki dla 'keypress'. – VisioN

Jedyną inną opcją, która przychodzi na myśl, jest zegar kontrolujący zawartość wprowadzanego tekstu.

var patt=new RegExp(/^@/); 
var charCheck = setInterval(function(){ 
    if (patt.test($("#textInput").val())){ 
    // initiate autocomplete 
    } 
},100);

Kod ten będzie sprawdzać zawartość elementu #textInput i sprawdzić, czy pasuje do wyrażenia regularnego o @ symbolu na początku łańcucha. Jeśli tak, funkcja test() oceni na true i będzie można zainicjować swój kod autouzupełniania.

Źródło

2012-08-26 21:51:39 Lix

Powinno to sprawdzić @ w dowolnym miejscu w obszarze tekstowym, a autouzupełnianie rozpoczyna się tylko wtedy, gdy kursor znajduje się tuż za znakiem "@". Myślę, że nadal można zweryfikować wszystkie te warunki, jednak czy istnieje jakieś prostsze rozwiązanie? – jcisio

@jci - Powinieneś wspomnieć o specyfikacji pozycji kursora w głównym poście. Również jeśli chcesz wyszukać ten symbol w dowolnym miejscu ciągu, po prostu usuń symbol '^'. – Lix

Jak o sprawdzenie czy @ została wpisana jako ostatni znak wartości pola?

$("body").on("keyup", "textarea", function(e) { 
    if (this.value.indexOf("@") == this.value.length - 1) { 
     console.log("Starting autocomplete"); 
    } 
});

DEMO:http://jsfiddle.net/FKhPW/2/

Źródło

2012-08-26 21:55:19 VisioN

Dzięki, w zasadzie robi to, co chciałbym robić. Jest kilka przypadków, na przykład, gdy użytkownik zakończy wiadomość, a następnie przejdzie do początku i doda "@username", to nie będzie działać. Spróbuję to zaadaptować. – jcisio

nie działa. jego wypalanie nawet dla klawisza z tyłu i klawisza Shift – Ashirvad

@jcisio Tak, prawdopodobnie będzie potrzebna korekta. Przynajmniej nie widzę żadnych innych szybkich i działających rozwiązań. – VisioN

Tu idziesz demo pracy:http://jsfiddle.net/LxpQQ/

Z mojego starego post tutaj:

jquery autocomplete using '@'

nadzieję, że będzie pasować spowodować :)

kod

source: function(request, response) { 
      if (request.term.indexOf("@") >= 0) { 
       $("#loading").show(); 
       getTags(extractLast(request.term), function(data) { 
        response($.map(data.tags, function(el) { 
         return { 
          value: el.name, 
          count: el.count 
         } 
        })); 
        $("#loading").hide();      
       }); 
      } 
     },

Źródło

2012-08-26 22:05:15

Dzięki, podczas gdy unikam jQuery UI (i jego autouzupełniania biblioteki), ten przykład ma kilka inteligentnych punktów, jak to dostaje tylko ostatni termin itp. Jestem zakładki do późniejszego wykorzystania. – jcisio

@jcisio Cooleos ':)' –

Zastosowanie `event.key` i nowoczesny JS, sprawdzając `@` bezpośrednio!

Brak kodów numerycznych więcej. Możesz bezpośrednio sprawdzić klucz.

const input = document.getElementById("textarea"); 
input.addEventListener("keydown", function (event) { 
    if (event.key === "@") { 
     // Do something 
    } 
});

Mozilla Docs

Supported Browsers

Źródło

2018-02-18 19:38:31 Gibolt

Wykryj wprowadzoną postać za pomocą JavaScriptu

Odpowiedz

Zastosowanie event.key i nowoczesny JS, sprawdzając @ bezpośrednio!

Powiązane problemy

Zastosowanie `event.key` i nowoczesny JS, sprawdzając `@` bezpośrednio!