[JS] Gedeelte van een input selecteren - Softwareontwikkeling

maandag 3 oktober 2005 16:05

Acties:

Wie dit leest is gek.

Topicstarter

Ik ben in html een zoekscherm aan het maken, wat er zo ongeveer uitziet als de editor voor een smart playlist in iTunes. Op het scherm staan diverse input-velden, waarin je voorwaarden kunt typen.

Als je een voorwaarde aan het intikken bent zoekt iTunes alvast in de database, en laat je een suggestie zien. (Als je 'rox' intikt staat er alvast roxette in je input-veldje).

Welnu, ik heb het hele gebeuren al zo'n beetje werkend, maar ik zit alleen nog te klooien met een javascriptje om een gedeelte van een input-veldje geselecteerd te maken. Ik had in de search al gevonden: [rml][ JavaScript] Textarea => Hoe selecteer ik een stuk[/rml] en [rml][ JS] Deel selecteren uit textfield[/rml] maar beide voorbeelden doen niet wat ik wil; ik zie steeds geen geselecteerd gedeelte in m'n input-veldje. Ik heb ook al naar de google-suggest gekeken, omdat daar een vergelijkbaar mechanisme in zit, maar die code is nogal onleesbaar.

Ik werk normaal gesproken met Delphi en Java, met Javascript heb ik bar weinig ervaring al komt 't steeds vaker voor dat ik daar wat mee knutsel. Kunnen jullie me een beetje helpen? Hieronder alvast de code waar ik momenteel aan het experimenteren ben:

code:

<HTML>

<script>
function doeiets(){
   selectRange(4,4,frm.henk); //grr werkt niet?
   // doSelect(frm.henk,"p"); //wil ook niet :-(
}

function doSelect(oTextarea, sText) {
    var oTextrange = oTextarea.createTextRange();
    oTextrange.findText(sText);
    oTextrange.select();
}

function selectRange(WhichFrom,TotalSelectLength,TheObject) {

    var intLen   = TheObject.value.length;
    var strMatch = TheObject.value.substr(WhichFrom, TotalSelectLength);
    var txtRange = TheObject.createTextRange();

    txtRange.findText(strMatch);
    txtRange.select();
}

</script>
<BODY>

Sjalala

<form name="frm" method="post" autocomplete="off">
<input name="henk" value="hdgjsfpp" onKeyPress="doeiets()">

<input type="submit" >

</form>

</BODY>

</HTML>

Siditamentis astuentis pactum.

dinsdag 4 oktober 2005 12:52

Acties:

Varienaja

Wie dit leest is gek.

Topicstarter

Hmm, ik ben aan het knutselen, en het blijkt dat 'n code wel werkt, alleen is het onzichtbaar. Wanneer ik in de onload van de body de 1e twee karakters in 'appelboom' geselecteerd maak, is het in het browservenster ook daadwerkelijk geselecteerd. Als ik vervolgens een karakter tik in het text-input veld, dan overschrijf ik wel steeds de 1e twee karakters, maar ik zie ze niet in het browservenster.

Dus de inhoud van form.textinput.value is wel 'pelboom', maar in het venster zie ik niet dat daarvan de 1e twee letters geselecteerd zijn. Dat geeft nogal aparte effecten als je tekst aan het ingeven bent. Hoe krijg ik die selectie nu zichtbaar op 't scherm?

Nogmaals de code die ik nu heb (de onload doet het niet in Firefox, heb ik gemerkt..):

code:

<HTML>

<script>
function doeiets(){
   sel(0,3);
}

function sel(iStart,iLength) {
    if (frm.henk.createTextRange) {
        var oRange = frm.henk.createTextRange();
        oRange.moveStart("character", iStart);
        oRange.moveEnd("character", iLength - frm.henk.value.length);
        oRange.select();
    } else if (frm.henk.setSelectionRange) {
        frm.henk.setSelectionRange(iStart, iLength);
    }

    frm.henk.focus(); 
}


</script>

<BODY>

<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
   frm.henk.value='appelboom';
</SCRIPT>


Sjalala

<form name="frm" method="post" autocomplete="off">
<input name="henk" onKeyPress="doeiets()">

<input type="submit" >

</form>

</BODY>

</HTML>

Siditamentis astuentis pactum.

dinsdag 4 oktober 2005 13:09

Acties:

Verwijderd

Bij het maken van een suggestie de tekst in een aparte laag over de input positioneren? Bij een onblur van de textbox, de tekst van de suggestie kopieren naar de textbox. Er is niets irritanters dan een control wat in de weg gaat zitten van je selectie

dinsdag 4 oktober 2005 13:12

Acties:

Varienaja

Wie dit leest is gek.

Topicstarter

'k Heb em. Je moet bij het onKeyUp-event iets doen, en niet al bij het onKeyDown event want dan is de inhoud van het veld nog niet bijgewerkt. :-)

Siditamentis astuentis pactum.