Javascript cursor vraag
Ik zit met een uitdaging!
Namelijk het volgende, ik hebt een text input field die middels javascript steeds geupdate wordt.
De reden is dat er na elke letter een punt moet komen. Echter als men nu bijvoorbeeld A.D. heeft ingevuld en er A.B.C.D. van wilt maken zal hij na het invullen van de B de cursor weer achteraan plaatsen met als resultaat A.B.D.C.
Hoe ga ik dit tegen?
Groeten,
Stefan
Probeer maar eens wat ik zei, a.d. en dan b en c er tussen te typen. hij plaatst de punten dan achter elkaar en de c komt er niet tussen.
ps. sorry voor de late reactie
Maar Wouter post ten minste nog een code, deze code zie ik bij jou nog steeds niet.
Als je geholpen wilt worden zou je relevante code moeten posten.
Want PHPHulp.nl heeft helaas nog geen herder zienden in dienst genomen.
Gewijzigd op 10/09/2012 10:01:03 door Frank WD
Stefan van den Broek op 07/09/2012 17:02:40:
De reden is dat er na elke letter een punt moet komen.
Moet dat echt gebeuren in die <input>, terwijl er getypt wordt? Het is geen probleem om die punten er automatisch bij te zetten in php, bij de submit verwerking.
Ofwel toon je, tijdens het typen, het resultaat in een <span>, zodat je al ziet wat er zal gebeuren.
Of zoiets van oplossing.
Lijkt je dit aanvaardbaar?
Type eens (door lang ingedrukte houden): aaaaaaaaaaaaaaaaaaaaaaaaap.
Twee punten..
Dit werkt in Chrome. De kans is vrij groot dat het in de meeste browsers niet zal werken
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function($) {
var inputje = $('#inputje');
inputje.keypress(function(e) {
var position = inputje[0].selectionStart; // positie begin van de selectie => komt overeen met de cursor, indien er geen selectie is
var inputValue = inputje.val();
var begin = inputValue.substr(0, position);
var end = inputValue.substr(position);
e.preventDefault(); // tegenhouden dat de letter op scherm komt
inputje.val( // nieuwe waarde wordt:
begin
+ String.fromCharCode(e.keyCode) + '.'
+ end
);
// cursor terugzetten, op de plaats na de nieuwe letters
inputje[0].selectionStart = position + 2;
inputje[0].selectionEnd = position + 2;
});
});
var inputje = $('#inputje');
inputje.keypress(function(e) {
var position = inputje[0].selectionStart; // positie begin van de selectie => komt overeen met de cursor, indien er geen selectie is
var inputValue = inputje.val();
var begin = inputValue.substr(0, position);
var end = inputValue.substr(position);
e.preventDefault(); // tegenhouden dat de letter op scherm komt
inputje.val( // nieuwe waarde wordt:
begin
+ String.fromCharCode(e.keyCode) + '.'
+ end
);
// cursor terugzetten, op de plaats na de nieuwe letters
inputje[0].selectionStart = position + 2;
inputje[0].selectionEnd = position + 2;
});
});
Het lijkt me wel doenbaar om dit cross browser te laten werken, maar ik blijf het een slecht idee vinden
Kris Peeters op 10/09/2012 11:44:18:
Ik vind het sowieso geen goed idee dat je manipulaties uitvoert op een <input> terwijl de gebruiker er in typt. Dat verschillende browsers wat vreemde dingen doen, vind ik nogal normaal.
Moet dat echt gebeuren in die <input>, terwijl er getypt wordt? Het is geen probleem om die punten er automatisch bij te zetten in php, bij de submit verwerking.
Ofwel toon je, tijdens het typen, het resultaat in een <span>, zodat je al ziet wat er zal gebeuren.
Of zoiets van oplossing.
Lijkt je dit aanvaardbaar?
Stefan van den Broek op 07/09/2012 17:02:40:
De reden is dat er na elke letter een punt moet komen.
Moet dat echt gebeuren in die <input>, terwijl er getypt wordt? Het is geen probleem om die punten er automatisch bij te zetten in php, bij de submit verwerking.
Ofwel toon je, tijdens het typen, het resultaat in een <span>, zodat je al ziet wat er zal gebeuren.
Of zoiets van oplossing.
Lijkt je dit aanvaardbaar?
Dat is dus het probleem, de klant wilt het op de wijze die ik omschreef.. en staat er op dat de code niet online komt.
Als het voor me zelf was had ik het er al lang op gezet! Ik snap dat het lastig is echter wat Wouter plaatste lijkt heel veel op wat ik heb.
Stefan van den Broek op 10/09/2012 12:44:51:
... en staat er op dat de code niet online komt. ...
Welke code?
De broncode van die functie? Dan zit je sowieso verkeerd met javascript.
javascript is openbaar.
een klant is meestal niet de best-geplaatste speler om te weten wat goed voor hem is.
Daarom heeft hij ook de diensten van een specialist ingehuurd.
Ik zal een tandarts niet vertellen hoe hij zijn boor moet vasthouden, noch welk materiaal een houthakker nodig heeft om een boom om te zagen/hakken.
De verhouding klant<->specialist is er één waarbij de klant een visie heeft over het eindresultaat. Dan kunnen beide partijen samen afspreken hoe ze dit willen realiseren.