[JS] Speciale tekens toevoegen aan een input

[Verwijderd]

Ik heb een inputfield waar ik een à la google autosuggest functie omheen heb gebouwd. Tot zover fijn en aardig, alles werkt ook.

Ik heb ook een paar knopjes onder de input field die als doel hebben om speciale tekens zoals é, ü, etc. aan de input field toe te voegen. Daarvoor heb ik een stukje javascript geschreven:

code:

function voegtoeTeken(tkn) {
    document.getElementById('inputfield').value += tkn;
}

Dit werkt. Maar het gekke is, als ik al een paar letters heb getypt in de inputfield, en ik klik vervolgens op zo een speciaal teken knopje (waar een onClick naar bovenstaande functie gekoppeld is), dan wordt de hele inputfield geleegd en komt alleen dat ene teken te staan

Bijvoorbeeld:

Ik probeer café te typen. Dan type ik caf, maar als ik dan op het é knopje druk, dan verdwijnt caf en komt er alleen é in de input field.

Heeft iemand enig idee wat hier aan de hand is? Zit al een paar uurtjes zinloos te klieren, heb de javascript code tig keer herschreven, alles blijft hetzelfde

[krvabo]

Het wordt op deze manier als numeriek + string behandeld.

JavaScript:

document.getElementById('inputfield').value = document.getElementById('inputfield').value + tkn;

Zou wel moeten werken.

[Verwijderd]

krvabo schreef op woensdag 09 maart 2011 @ 21:12:
Het wordt op deze manier als numeriek + string behandeld.

JavaScript:

document.getElementById('inputfield').value = document.getElementById('inputfield').value + tkn;

Zou wel moeten werken.

Dit is exact hetzelfde als de bovenstaande code. Uit wanhoop dat ook maar even geprobeerd, maar helaas, zelfde probleem

[krvabo]

Heb je verder al gedebugged?

JavaScript:

function voegtoeTeken(tkn) {
  window.alert(document.getElementById('inputfield').value);
  window.alert(tkn);
  document.getElementById('inputfield').value = document.getElementById('inputfield').value + tkn;
  window.alert(document.getElementById('inputfield').value);
}

Wat komt daar uit? Rare waarden? Verandert de waarde wel voor je bij de laatste alert op OK klikt?
Als dat zo is zou het kunnen zijn dat er nog een ander script iets doet met de waarde. Aangezien alert blocking is zou je de waarde moeten zien veranderen voordat je de alert wegklikt.

--
Staat er nog iets in de error console in Firefox / Chrome (net waar je in devt) ?

[ Voor 6% gewijzigd door krvabo op 09-03-2011 21:31 ]

[Verwijderd]

^krvabo, niet nodig meer! Eindelijk de boosdoener gevonden

Het zat 'm helemaal niet in die voegtoeTeken() functie.

Dit is de inputfield:

HTML:

<input type="text" value="" id="inputfield" onkeyup="lookup(this.value);" onblur="fill();">

En dit is waar de suggestielijst in verschijnt:

HTML:

    <div class="suggestionsBox" id="suggestions" style="display: none;">
        <div class="suggestionList" id="autoSuggestionsList">
            &nbsp;
        </div>
        </div>
    </div>

En dan uiteraard de bijbehorende autosuggest javascript code:

JavaScript:

    function lookup(inputString) {
        if(inputString.length == 0) {
            $('#suggestions').hide();
        } else {
            $.post("gegevensophalen.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    }
    function fill(thisValue) {
        $('#inputfield').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }

Die function fill() in combinatie met onblur bij input veroorzaakt zéér hoogstwaarschijnlijk het probleem.

Als ik die hele functie fill() weghaal, dan werken die knopjes voor speciale tekens wel (inputfield wordt in ieder geval niet geleegd en dergelijke), maar dan werkt de autosuggest niet naar behoren. De suggesties die tevoorschijn komen, kan ik dan niet meer aanklikken/selecteren. Suggestielijst is dan alleen "te zien".

Als ik de eerste regel uit de functie fill() weghaal, $('#inputfield').val(thisValue), dan kan ik een suggestie wel aanklikken, maar wordt ie niet geselecteerd in de inputfield.

Als ik de tweede regel uit de functie fill() weghaal, setTimeout("$('#suggestions').hide();", 200), dan kan ik een suggestie aanklikken, de suggestie wordt geselecteerd en komt ook in de input field te staan, maaarrrr: de suggestielijst onder de inputfield blijft óók staan terwijl deze normaliter dient te verdwijnen na een selectie.

En nou zit ik met de handen in het haar. Die speciale knopjes moeten dus i.c.m. de bovenstaande code gaan werken, en anders

[ Voor 6% gewijzigd door Verwijderd op 09-03-2011 22:08 ]

[krvabo]

Dus lijkt het probleem opgelost als je de settimeout weghaalt?

JavaScript:

function fill(thisValue) { 
  $('#inputString').val(thisValue); 
  setTimeout("hide()", 200); 
}

function hide() {
  $('#suggestions').hide();
}

Werkt dat dan niet?
Overigens zou er dan ook gewoon een fout in je error console moeten staan. Onder firefox te bereiken via Ctrl + Shift + J, of via het Tools-menu.

[NMe]

Je zou zeggen dat iemand die al zo vaak op de regels is gewezen als jij intussen Waar hoort mijn topic? ook wel gelezen zou hebben of op zijn minst een goede titel voor zijn topic zou kunnen verzinnen....

PRG>>WEB en titelfix: "Problemen met JavaScript" >> "[JS] Speciale tekens toevoegen aan een input"

[Verwijderd]

krvabo schreef op woensdag 09 maart 2011 @ 21:53:
Dus lijkt het probleem opgelost als je de settimeout weghaalt?

JavaScript:

function fill(thisValue) { 
  $('#inputString').val(thisValue); 
  setTimeout("hide()", 200); 
}

function hide() {
  $('#suggestions').hide();
}

Werkt dat dan niet?
Overigens zou er dan ook gewoon een fout in je error console moeten staan. Onder firefox te bereiken via Ctrl + Shift + J, of via het Tools-menu.

Dat werkt ook niet. Even in de console gekeken, en nee hij geeft geen fout. Zo gek is dat ook niet, want volgens mij is het helemaal geen fout.

Overigens met het verwijderen van setTimeout("$('#suggestions').hide();", 200) werken de speciale teken-knopjes ook niet.

Wanneer werken ze wel? Als de regel $('#inputfield').val(thisValue) in de functie fill() wordt verwijderd. Maar: dan kan ik een suggestie in de suggestielijst niet selecteren. Ik kan het wel aanklikken, maar de waarde wordt niet overgenomen in de inputfield. Dus die regel is essentieel.

[krvabo]

Aan de code te zien bestaat #inputString niet, maar #inputfield wel.


Daarnaast gebruik je thisValue bij je functie fill(), maar bij de onblur wordt geen waarde meegegeven.
- Ook al wordt dit in de data van de $.post wellicht wel gedaan, in je onblur niet.

[edit]

In je laatste reactie staat er wel inputfield, maar in de code hierboven niet.

[ Voor 35% gewijzigd door krvabo op 09-03-2011 22:11 ]

[Verwijderd]

krvabo schreef op woensdag 09 maart 2011 @ 22:08:
Aan de code te zien bestaat #inputString niet, maar #inputfield wel.

Daarnaast gebruik je thisValue bij je functie fill(), maar bij de onblur wordt geen waarde meegegeven.

Klopt, ik had even om geen verwarring met een andere lokale variabele te creëren in de bovenstaande posts #inputString vervangen door #inputfield, alleen bij de functie fill() vergeten te veranderen in de bovenstaande post. Dus het is allemaal gewoon hetzelfde, in de originele code althans wel.

[Verwijderd]

Beste mensen, ben er dan eindelijk uit.

Heeft me wel mijn hele avond gekost... maar nu is het probleem verholpen.

Probleem lag 'm in deze javascript file:http://code.jquery.com/jquery-1.5.js. Welke ik gebruikte om bepaalde tekst in de vorm van tekstballonnen weer te geven.

Een beetje uit wanhoop besloot ik maar om de boel zoveel mogelijk te strippen en de code slechts te beperken tot waar het probleem lag [doe dat dan lekker meteen!! ].

Die tekstballonnen konden me dus geschelen worden. Zo gezegd, zo gedaan... en na het verwijderen van de import-regel voor het bovenstaande javascript bestand, deed alles het weer!

[R4gnax]

Denk eerder dat je bedoelt dat na het verwijderen van die regel niets het meer doet, waardoor de functionaliteit van jouw script niet meer gebroken kan worden.

Waarom wil je trouwens knopjes voor speciale tekens toe gaan voegen? Een autocomplete zou van zichzelf gewoon al slim genoeg moeten zijn om bijvoorbeeld bij een ingevoerde letter "e" ook suggesties met "è", "é" en "ë" te geven.

En zelfs als je dat niet gebolwerkt kunt krijgen: al sinds jaar en dag zijn er speciale toetsenbordindelingen met dead keys (zoals bijvoorbeeld de "US International" indeling onder Windows) waarmee je dit soort karakters perfect in kunt voeren. Gebruikers die dit soort tekens dagelijks gebruiken zullen zo'n toetsenbordindeling al ingesteld hebben staan.

[PeterSelie]

R4gnax schreef op donderdag 10 maart 2011 @ 09:02:
En zelfs als je dat niet gebolwerkt kunt krijgen: al sinds jaar en dag zijn er speciale toetsenbordindelingen met dead keys (zoals bijvoorbeeld de "US International" indeling onder Windows) waarmee je dit soort karakters perfect in kunt voeren. Gebruikers die dit soort tekens dagelijks gebruiken zullen zo'n toetsenbordindeling al ingesteld hebben staan.

Ik kan me best een aardige hoeveelheid usercases voorstellen (afgezien dus van de autosuggest functionaliteit waarin je suggereert dat ook speciale characters automatisch meegenomen zouden moeten worden) waar gebruikers niet voldoende kennis hebben om van deze dead keys af te weten en waar het vanuit gebruikers oogpunt best wel eens een veel gebruikte functionaliteit zou kunnen zijn.

Ik kan me voorstellen dat bijvoorbeeld mijn oma het best wel eens zou gaan gebruiken.

[NMe]

Ja...en dan gooi je een fulltext-index op de relevante tabel en dan is het ineens niet meer belangrijg of je nu e, é. ë, ę, ė, ē of een van de hoofdlettervarianten zoekt.

[RobIII]

NMe schreef op donderdag 10 maart 2011 @ 10:17:
Ja...en dan gooi je een fulltext-index op de relevante tabel en dan is het ineens niet meer belangrijg of je nu e, é. ë, ę, ė, ē of een van de hoofdlettervarianten zoekt.

offtopic:
Dat is nogal afhankelijk van (o.a.) je RDBMS en gekozen collation; kies je bijvoorbeeld een AS collation dan boeit het namelijk wél

[EnsconcE]

Verwijderd schreef op woensdag 09 maart 2011 @ 23:00:
Beste mensen, ben er dan eindelijk uit.

Heeft me wel mijn hele avond gekost... maar nu is het probleem verholpen.

Probleem lag 'm in deze javascript file:http://code.jquery.com/jquery-1.5.js. Welke ik gebruikte om bepaalde tekst in de vorm van tekstballonnen weer te geven.

Een beetje uit wanhoop besloot ik maar om de boel zoveel mogelijk te strippen en de code slechts te beperken tot waar het probleem lag [doe dat dan lekker meteen!! ].

Die tekstballonnen konden me dus geschelen worden. Zo gezegd, zo gedaan... en na het verwijderen van de import-regel voor het bovenstaande javascript bestand, deed alles het weer!

Als je wilt weten waar het probleem vandaan komt, moet je denk ik kijken bij je onblur. Die fill staat daar helemaal niet goed.

The onBlur event handler executes the specified JavaScript code or function on the occurance of a blur event. This is when a window, frame or form element loses focus. This can be caused by the user clicking outside of the current window, frame or form element, by using the TAB key to cycle through the various elements on screen, or by a call to the window.blur method.

Het lijkt mij dat je inputfield aan de suggestionlijst zijn id meegeeft, waarna de suggestionlijst/item het inputfield vult na een onclick oid. Je inputfield hoort niet bij het verlies van focus actie te ondernemen.

[PeterSelie]

NMe schreef op donderdag 10 maart 2011 @ 10:17:
Ja...en dan gooi je een fulltext-index op de relevante tabel en dan is het ineens niet meer belangrijg of je nu e, é. ë, ę, ė, ē of een van de hoofdlettervarianten zoekt.

Klopt, daarom dus ook afgezien van de suggestie dat het hier om autosuggest gaat.

Bij het invoeren van een tekst als reactie op content kan ik me voorstellen dat een dergelijk knopje wél gewenst / gebruikersvriendelijk kan zijn