[CSS] Caret in text input stylen?*

[Pin0]

Na een uitgebreide zoektocht hier en met google open ik toch maar een topic met de vraag of het mogelijk is de knipperende streep (|) in de active text input te stylen.

Het gaat dus om de knipperende streep die achter de zojuist ingetikte tekst blijft knipperen...

Ik zou daarvoor bijvoorbeeld een pijltje willen oid...

[SchizoDuckie]

Nee, dat kan niet. Da's de caret, en voor zover ik weet is dat een system object.

[djluc]

Nee, dat is specifiek voor elke browser. Wat je wel kan doen is een tekstbox in flash maken of bijvoorbeeld met JavaScript een pijltje er overheen leggen met een layer. Echt simpel zal het niet worden ben ik bang. Crossbrowser is Flash de meest simpele optie denk ik.

[MaZo]

Volgens mij is dit iets van Windows, en dus niet van een webapp.
Is dus ook niet te customizen volgens mij.

[Pin0]

Daar was ik al bang voor... Ik zal eens kijken of ik met de term caret (die wist ik niet) iets verder kom...

[Vecodo]

Naar mijn weten is inderdaad de snelste en makkelijkste oplossing, Flash. !

Dit geen oplossing TS ?

[Rickets]

Waarom wil je dat veranderen? Iedereen weet wat het doet, en hoe het werkt. Er zullen zeker mensen zijn die je pijltje niet gaan snappen.

Bovendien, de caret kan je bijvoorbeeld halverwege een zin zetten om de tekst te wijzigen. Zo'n pijltje midden in een zin ziet er niet uit. En wat ga je doen als mensen backspace gebruiken? Het pijltje de andere kant op laten wijzen?

Mijn advies: laat de caret met rust en spendeer je tijd die het kost om deze aan te passen aan nuttige verbeteringen.

[Pin0]

Ik had weer eens tijd om verder te gaan en wellicht is het handig om te weten waarom ik dit wil...

Ik heb het leuke idee om een website te maken waarbij de navigatie gaat zoals vroeger onder dos...
Een soort dos simulatie dus...

Ter illustratie heb ik wat ik al heb online gezet: http://www.nijdam.nu/cmd/

Ik verplaats nu de dos_cursor (de liggende streep, geanimeerde gif in div) met javascript op basis van het aantal tekens in het input element.

Ook had ik een versie waarbij ik alle toetsen afvang en de html binnen een div met javascript aanpas. Maar dat kreeg ik niet aan de gang in FireFox.

Flash heb ik bijna geen ervaring mee, en ik wil zo min mogelijk technieken/verschillende plugins gebruiken... javascript ben ik ook niet blij mee

Dus al iemand nog ideeën heeft om de caret/dosprompt te stylen/verbergen dan graag

[nIghtorius]

Pin0 schreef op woensdag 26 april 2006 @ 16:51:
Ik had weer eens tijd om verder te gaan en wellicht is het handig om te weten waarom ik dit wil...

Ik heb het leuke idee om een website te maken waarbij de navigatie gaat zoals vroeger onder dos...
Een soort dos simulatie dus...

Ter illustratie heb ik wat ik al heb online gezet: http://www.nijdam.nu/cmd/

Ik verplaats nu de dos_cursor (de liggende streep, geanimeerde gif in div) met javascript op basis van het aantal tekens in het input element.

Ook had ik een versie waarbij ik alle toetsen afvang en de html binnen een div met javascript aanpas. Maar dat kreeg ik niet aan de gang in FireFox.

Flash heb ik bijna geen ervaring mee, en ik wil zo min mogelijk technieken/verschillende plugins gebruiken... javascript ben ik ook niet blij mee

Dus al iemand nog ideeën heeft om de caret/dosprompt te stylen/verbergen dan graag

misschien een idee om uit te zoeken hoe je toetsaanslagen kunt afvangen m.b.v. javascript? dan heb je ook niet meer die tekstvak nodig en ben je van het Caret probleem af.

Rapid Intake - WBT Tips - Javascript Tips - Trapping Keystrokes in JavaScript for Software Simulations.

-edit

kijkend naar je source zie ik al dat je deze principe al gebruikt. dus je bent bekend daarmee. het enigste wat je hoeft te doen is een DIV te gebruiken en de getypte tekst opslaan in een variabele.

[ Voor 8% gewijzigd door nIghtorius op 26-04-2006 17:42 ]

[Pin0]

nIghtorius schreef op woensdag 26 april 2006 @ 17:40:
[...]

knip...

kijkend naar je source zie ik al dat je deze principe al gebruikt. dus je bent bekend daarmee. het enigste wat je hoeft te doen is een DIV te gebruiken en de getypte tekst opslaan in een variabele.

Daar was ik dus al aan begonnen, echter de oplossing die ik had werkte niet in FireFox, ik zal eens kijken naar de link die je gaf want die oplossing ziet er eenvoudiger uit...

Ik vraag het ook omdat ik zeker wil weten dat ik geen simpele oplossingen over het hoofd zie...

[Pin0]

Ik ben er mee aan de gang gegaan en ben nu wat verder (Zie www.nijdam.nu/cmd) Ik van nu alle toetsen af met document.onkeypress en stop deze met javascript in een div, dit werkt aardig...

Echter ik ben er nog niet in geslaagd in IE ook de backspace af te vangen... wel heb ik geprobeerd om document.onkeydown te gebruiken dan werkt deze code wel in IE maar niet in FF en dan doet er zich een ander verschijnsel voor wat ik niet goed begrijp namelijk de speciale tekens als \ en . worden dan een Ü en ¾ erg raar...

Heeft iemand een idee om ook de backspace in IE af te vangen?

JavaScript:

<script type="text/javascript">
document.onkeypress = function(e) //onkeydown 
{
     var key;
     if(window.event){
          key = window.event.keyCode;     //IE
          if(event.keyCode==8){event.returnValue=false;}
     }
     else{
          key = e.which;     //firefox
          if(key==8){e.preventDefault();}
     }
     if(key==13){execute(key);}
     else if(key==8){backspace(key);}       
     else{typen(key);}
}
function typen(toets){
    var html_txt = document.getElementById('dos_cursor_cmd').innerHTML;
    var html_temp = String.fromCharCode(toets);
    if(html_temp==" "){html_temp="\&nbsp;";}//spatie vervangen voor html code anders ziet men meerdere spaties niet
    html_txt=html_txt+html_temp;
    document.getElementById('dos_cursor_cmd').innerHTML = html_txt;
}
function backspace(toets){
      var html_txt = document.getElementById('dos_cursor_cmd').innerHTML
      html_txt=html_txt.substring(0,html_txt.length-1);
      document.getElementById('dos_cursor_cmd').innerHTML = html_txt;
}
function execute(toets){
    if(toets==13){alert("enter");}
}
</script>

[GigaDave56]

@ Pino Heb net even je website bekeken, maar bij mij werkt het niet helemaal met Firefox (1.5.0.2). Vanaf het eerste karakter verschijnt de rest van mijn getyp in het zoekbalkje (ctrf-f balkje, in deze pagina zoeken). Mischien ligt het aan mij

[edit]
@ Gerco (hieronder) Bedankt. Dat dacht ik al maar kon er niet opkomen / vinden, maar dit levert voor Pino een extra probleem op.

[ Voor 24% gewijzigd door GigaDave56 op 27-04-2006 14:42 ]

[Gerco]

Dat ligt aan jou (en aan mij). Je hebt "find as you type" aangezet in FF en dan werken dit soort grappen opeens niet meer (goed)

[Pin0]

Ik hoorde van iemand hier dat 'find as you type' ook inspringt als je in een formulier aan het tikken bent...

Ik begrijp dat dit iets is wat niet standaard aanstaat? Dan geloof ik dit gedeelte wel, het is trouwens de bedoeling dat je ook gewoon met de muis kan navigeren.... maar dat moet ik nog implementeren... :-)

Feit blijft dat backspace (nu ook zo gefixed dat de spaties aan het einde worden verwijderd) het in IE (nog) niet doet...

[Justice]

findasyoutype kan je uitzetten doormiddel van een attribuut, moet je even opzoeken.
Leuk idee.

[Pin0]

Justice schreef op donderdag 27 april 2006 @ 16:20:
findasyoutype kan je uitzetten doormiddel van een attribuut, moet je even opzoeken.
Leuk idee.

Ik heb gezocht en gevonden hoe je het in een configuratie file van FF zelf kan uitzetten... hoe je dit voor iedereen kan doen met javascript kan ik niet vinden... ik zoek verder

user_pref ("accessibility.typeaheadfind", false);

[Justice]

http://www.adammessinger.com/2005/12/20/firefox-find-bug-fix

Ah het is een bug van firefox. Neem aan dat dit dan vanzelf gefixed wordt. Ik kan trouwens niet vinden hoe je dit uitzet in html, dus wellicht ben ik in de war met iets anders.

[ Voor 27% gewijzigd door Justice op 28-04-2006 12:51 ]

[sopsop]

Even zijdelings: Waarom gebruik je tables om bijvoorbeeld je dir-listing te laten zien? Je gebruikt een mono-spaced font, dus je kunt gewoon gebruik maken van uitlijning d.m.v. spaties (& nbsp .

Nu springt de tabel trouwens iets in, waardoor de uitlijning niet meer klopt.

Verder zou ik voor iedere regel een container maken, op die manier wordt het eenvoudig om middels javascript het hele scherm te besturen. Je bepaalt het maximaal aantal regels, maakt een JS-array en zet daar de regels in. Vervolgens kun je bij bijvoorbeeld het commando 'cls' je array leeggooien en dan een refresh van je schermopbouw doen.

PS: Je bent echt een bikkel als je het CMS-gedeeltje in de vorm van Norton Commander doet

[ Voor 9% gewijzigd door sopsop op 28-04-2006 14:50 ]

[Pin0]

boppert schreef op vrijdag 28 april 2006 @ 14:48:
Even zijdelings: Waarom gebruik je tables om bijvoorbeeld je dir-listing te laten zien? Je gebruikt een mono-spaced font, dus je kunt gewoon gebruik maken van uitlijning d.m.v. spaties (& nbsp .

Ik heb altijd geleerd dat we niet uitlijnen met spaties, maar het kan wel inderdaad...

Nu springt de tabel trouwens iets in, waardoor de uitlijning niet meer klopt.

Ik ben nog bezig met het besturings gedeelte, layout en zo bevinden zich nog in de test fase, hier ga ik later beter op letten...

Verder zou ik voor iedere regel een container maken, op die manier wordt het eenvoudig om middels javascript het hele scherm te besturen. Je bepaalt het maximaal aantal regels, maakt een JS-array en zet daar de regels in. Vervolgens kun je bij bijvoorbeeld het commando 'cls' je array leeggooien en dan een refresh van je schermopbouw doen.

Op zich wil ik zo min mogelijk javascript en ben ik van plan alle commando's en bijbehorende uitvoer met php te doen...

PS: Je bent echt een bikkel als je het CMS-gedeeltje in de vorm van Norton Commander doet

Ik ben er overigens ook in geslaagd de backspace ook in IE af te vangen met de volgende functie:

JavaScript:

function catchIt() {
    if(window.event.keyCode == 8){
        backspace();
        return false;
    }
}

[megamuch]

/hk mode

format c:\ werkt niet

/hk mode

Geweldig als je het helemaal kan uitwerken.
Erg origineel

[Blaise]

Momenteel popt de easy-find-bar op in Firefox als ik iets typ. Ligt dat aan je script of is dit een bug van Firefox?

[3V3RT]

bij mij popt die findbar alleen als ik een forward slash intik ( / )

[Verwijderd]

In opera krijg je de adres-bar-dropdown* als je een 'h' intypt.

* die lijst die je krijgt als je op het pijltje van de adres-bar klikt.

[BasieP]

Blaise schreef op vrijdag 28 april 2006 @ 19:44:
Momenteel popt de easy-find-bar op in Firefox als ik iets typ. Ligt dat aan je script of is dit een bug van Firefox?

dit komt omdat de keys nog doorgespeeld worden aan de browser, je moet ze ff afvangen (JS) en niet doorsturen

[Pin0]

Ik ben in het weekend weer wat verder gegaan en nu ben ik dus met php de commando's verder aan het implementeren

De volgende commando's werken nu:
cls
ver
dir (voor de root moet ik . en .. nog afhandelen)

commando's die ik in ieder geval nog ga doen
cd $dir
type $file
ik moet nog iets verzinnen voor jpgs en pdfjes en zo...

bugs waar ik nog geen oplossing voor weet:
dat in FF na het typen van / het zoekveld te voorschijn komt... (kijken of ik dat kan afvangen met javascript)
evenals findasyoutype / typeaheadfind oid... zoeken naar mogelijkheid dit te omzeilen (hoewel dit niet standaard aan staat en dus een gebruikersinstelling is)
in opera doet de "h" iets (in principe maak ik het alleen voor FF en IE)

[Verwijderd]

boppert schreef op vrijdag 28 april 2006 @ 14:48:
Even zijdelings: Waarom gebruik je tables om bijvoorbeeld je dir-listing te laten zien? Je gebruikt een mono-spaced font, dus je kunt gewoon gebruik maken van uitlijning d.m.v. spaties (& nbsp .

Ook met een dergelijke site kan je prima iets semantisch bouwen. Natuurlijk kan je alles in iets van <pre><samp>...</samp></pre> stoppen (als zijnde computer output), maar ik zou toch voor de normale aanpak met de hele sloot aan semantische elementen gaan werken.

[Pin0]

Ik doe nu wel alles met spaties (str_repeat(" ",5)) is wel zo makkelijk....

[Pin0]

Sorry voor de kick, maar ik ben inmiddels wat verder, en ik vroeg mij af of iemand nog op- of aanmerkingen heeft. Ook heb ik de h en de / goed afgevangen denk ik. In IE en FF werkt het in Opera heb ik het nog niet kunnen testen.

de bestanden zijn te bekijken met 'type %bestandsnaam%' en probeer ook het 'color' commando.
Mijn oude site heeft inmiddels plaats gemaakt voor deze dus de /cmd in de url kan je achterwege laten...

Ook heb ik in dos nooit met afbeeldingen gewerkt deze kan je nu wel bekijken met type maar dat is natuurlijk niet de dos way..
Ook heb ik de bestanden en directories klikbaar gemaakt voor de minder dos minded onder ons... ze moeten om de inhoud te bekijken nog wel 'dir' in tikken... (dir is trouwens standaard bij het openen van de website)

[t-x-m]

Jammer dat niet steeds alles onder elkaar komt, zoals in de 'echte' dos. (kan denk ik een ajax methode wel van te pas komen?)
En ook het pijlte omhoog voor het vorige commando miste ik

Verder veel respect voor het programmeren van al die dos command's , als ze allemaal werken dan natuurlijk("U heeft onvoldoende rechten voor het uitvoeren van de opdracht.").

^{Niet boeiend: MODE Systeemapparaat configureren staat twee keer in help.txt}

[ Voor 31% gewijzigd door t-x-m op 07-06-2006 17:25 ]

[MMUilwijk]

offtopic:
Grappige interface Martien! Nu alleen nog zorgen dat de structuur niet vervangen wordt maar gewoon netjes de diverse commando's . Beetje Javascript gebruiken daarvoor. Het wordt helemaal af als je wat AJAX toepast zodat ook je pagina niet meer refreshed en je echt de dos-stijl hebt.

[Pin0]

Ergens wist ik dat het niet onder elkaar komen van de commandos en het pijltje naar boven een punt zou zijn wat naar voren zou komen.

Ik heb nog geen ervaring met AJAX maar dit is wellicht een mooi leermoment
Heeft iemand een idee hoe ik het pijltje naar boven kan afvangen, zonder dat de rest van mijn javascript in de war raakt?

JavaScript:

<script type="text/javascript">
//IE backspace
document.onkeydown = catchIt;
function catchIt() {
    if(window.event.keyCode == 8){
        backspace();
        return false;
    }
}
document.onkeypress = function(e) //onkeydown voor IE 
{
     var key;
     if(window.event){
          key = window.event.keyCode;     //IE
          if(key==8){event.returnValue=false;}
     }
     else{
          key = e.which;     //firefox
          if(key==8){e.preventDefault();} //afvangen van backspace
          if(key==47){e.preventDefault();} //afvangen van / (slash)
          if(key==104){e.preventDefault();} //afvangen van h voor Opera (Weet niet of dit werkt)
     } 
     if(key==13){execute(key);}
     else if(key==8){backspace(key);}       
     //else if(key==39){alert('pijl');} //hier probeerde ik dus de pijltjes toetsen af te vangen        
     else{typen(key);}
}
function typen(toets){
    var html_txt = document.getElementById('dos_cursor_cmd').innerHTML;
    var html_temp = String.fromCharCode(toets);
    if(html_temp==" "){html_temp="\&nbsp;";}//spatie vervangen voor html code anders ziet men meerdere spaties niet
    html_txt=html_txt+html_temp;
    document.getElementById('dos_cursor_cmd').innerHTML = html_txt;
}
function backspace(toets){
      var html_txt = document.getElementById('dos_cursor_cmd').innerHTML
      if(html_txt.substring(html_txt.length-6,html_txt.length)=="\&nbsp;"){
        html_txt=html_txt.substring(0,html_txt.length-6);
      }
      else{
        html_txt=html_txt.substring(0,html_txt.length-1);
      }
      document.getElementById('dos_cursor_cmd').innerHTML = html_txt;
}
function execute(toets){
    if(toets==13){
        var cl=encodeURIComponent(document.getElementById('dos_cursor_cmd').innerHTML);
        //alert("index.php?cl="+cl);
        window.location="index.php?cl="+cl;
    }
}
</script>

En: MODE Systeemapparaat configureren staat ook twee keer in de help van de XP cmd...

[ Voor 12% gewijzigd door Pin0 op 08-06-2006 09:59 ]

[Pin0]

Het pijltje omhoog doet het nu ook! (in IE als FF) doskey!
Ik heb wel mij javascript rigoureus moeten aanpassen, want onkeypress geeft geen keycodes voor de pijltjes, dus heb ik speciaal daarvoor twee functies gemaakt één die onkeypress gebruikt voor de toetsen en één die onkeydown gebruikt voor de pijltjes...

de doscommandos (en de directories) onthoud ik als array in een sessie en met php schrijf ik die als javascript array weer weg in de functie de de pijltjes afhandelt...

Nu nog met AJAX de pagina niet steeds verversen maar de uitvoer van de opdrachten onder elkaar plaatsen en de pagina laten scrollen. Ik voorzie hier een probleem met de doskey array omdat de javascript van de pagina met AJAX niet ververst word (alleen de div met uitvoer) De oplossing zou dan zijn om iedere opdracht met javascript aan de array toe te voegen.

Kortom het begint wat te worden en ik sta open voor jullie suggesties, zo zoek ik nog iets mooiers als type om afbeeldingen te bekijken. misschien met copy en dan openen in een nieuw venster oid...
Ik deed onder dos nooit wat met plaatjes ed dus ik sta open voor screenshots van vroeger veelgebruikte dos imageviewers.

www.nijdam.nu