[Javascript] JS Prompt resultaat valideren mbv functie

[Reveller]

Soms wil ik dat gebruikers alleen alfanumerieke karakters kunnen invoeren. Ik heb daarvoor de volgende functie:

JavaScript:

function limitchars(obj) {
  obj.value = obj.value.replace(/[^-a-z0-9_]/ig,'');
  obj.value = obj.value.toLowerCase();
}

De implementatie gaat dan als volgt:

HTML:

<input type="text" value="" onkeyup="limitchars(this);" />

Ik heb nu een functie geschreven waarmee gebruikers in een javascript prompt een nieuwe naam voor een plaatje kunnen geven.

JavaScript:

function rename(id, fname) {
  if (newname = prompt('Enter the new name for: ' + fname, fname)) {
    location.href = 'image/rename/'+ escape(id) +'/'+ escape(newname);
  }
}

Met als implementatie (om plaatje 142, met naam got-logo, te hernoemen):

HTML:

<a href="javascript:rename(142, 'got-logo')"><img src="got-logo.jpg"></a>

Ik zou graag willen dat gebruikers ook in deze prompt alfanumerieke karakters kunnen invoeren. Ik heb dit al op verschillende manieren geprobeerd te bereiken, zoals

JavaScript:

if (limitchars(newname) = prompt('Enter the new name for: ' + fname, fname)) {

Maar dit werkt niet. Hoe moet ik de functie rename aanpassen, zodat gebruikers alleen alfanumerieke karakters kunnen invoeren?

(En natuurlijk controleer ik serverside de input nogmaals )

[Voutloos]

Je wil nu iets naar een functieaanroep assignen? Doe gewoon die 2 bewerkingen die je in limitchars() doet in de rename functie op variabele newname, danwel roep daar na de prompt limitchars() aan.

[user109731]

Limitchars veranderen, zodatie niet alleen op objecten met een value member werkt, maar op alle strings:

JavaScript:

function limitchars(obj) {
  return obj.replace(/[^-a-z0-9_]/ig,'').toLowerCase();
}

En dan zo aanroepen:

HTML:

<input type="text" value="" onkeyup="this.value = limitchars(this.value);">

en die prompt gaat dan zo:

JavaScript:

newname = limitchars(prompt('Enter the new name for: ' + fname, fname));

edit: wat de user boven mij dus zegt

[ Voor 10% gewijzigd door user109731 op 25-10-2006 22:30 ]

[Reveller]

Voutloos schreef op woensdag 25 oktober 2006 @ 22:25:
Doe gewoon die 2 bewerkingen die je in limitchars() doet in de rename functie op variabele newname [...]

Ik wil dat de input realtime gecontroleerd wordt, net als bij elke andere input (via onkeyup). Achteraf de input controleren kan ik ook, maar hoe doe ik het terwijl de gebruiker typt?

[Janoz]

Kan niet met een prompt. Bedenk daarnaast trouwens dat een prompt in IE7 niet meer ondersteund schijnt te worden.

[ Voor 64% gewijzigd door Janoz op 25-10-2006 22:36 ]

[Verwijderd]

Janoz schreef op woensdag 25 oktober 2006 @ 22:35:
Kan niet met een prompt. Bedenk daarnaast trouwens dat een prompt in IE7 niet meer ondersteund schijnt te worden.

Kortom, maak je eigen implementatie, eventueel met een modal dialog.

[Reveller]

Verwijderd schreef op woensdag 25 oktober 2006 @ 22:38:
[...]eventueel met een modal dialog.

Die worden toch niet door FF ondersteund?

[Verwijderd]

Reveller schreef op woensdag 25 oktober 2006 @ 22:42:

Die worden toch niet door FF ondersteund?

Nee, maar wat maakt dat uit? Als je even detecteert of de client het ondersteunt, kun je er gebruik van maken. Dat betekent nog niet dat je applicatie er ook van afhankelijk moet worden.

[user109731]

Firefox ondersteund geen modal dialogs afaik, en IE7 laat idd een waarschuwingsbalk zien, ook niet handig. Misschien het mooiste om je pagina te faden achter een div, en daar dan een div met je inputbox overheen? Dat vind ik zelf altijd erg netjes, en handiger dan een window

[Reveller]

Grote prutser schreef op woensdag 25 oktober 2006 @ 22:45:
[...] Misschien het mooiste om je pagina te faden achter een div, en daar dan een div met je inputbox overheen? Dat vind ik zelf altijd erg netjes, en handiger dan een window

Dat vind ik een goed idee! Ik probeer nu mbv. javascript een div te toveren en dat gaat goed. De div werd alleen onderaan de pagina erbij gezet, terwijl ik hem 'bovenop' de pagina wil hebben. Ik herinner mij dat dit met 'z-index' kon, maar als ik dat toevoeg, krijg ik een foutmelding: "rename not defined"?

JavaScript:

function rename(id, fname) {  
  var div = document.createElement('div');
  div.setAttribute('id','rename');
  div.style.left = 300;
  div.style.top = 300;
  div.style.z-index = 100;
  div.style.position = "absolute";
  div.style.background = "#000"; 
 
  var input = document.createElement('input');
  input.setAttribute('type', 'text');

  div.appendChild(input);

  document.body.appendChild(div);
}

[user109731]

Het is '300px' ipv 300, ik denk dat daar je probleem zit. z-index gebruik je als je elementen in een bepaalde volgorde over elkaar heen wilt leggen, maar ik denk niet dat je dit nu nodig hebt? Anyway, een streepje word gezien als een min in JavaScript, daarom word het zIndex

Je kunt trouwens ook direct div.id en input.type gebruiken, is wat korter dan setAttribute

[Reveller]

Dank je! Ik ben nu lekker bezig hiermee Ik vind het een mooiere oplossing dan een popup met een aparte html pagina openen.

Zijn er trouwens voor voor- of nadelen aan het gebruik van een div boven een window.open?

[ Voor 27% gewijzigd door Reveller op 25-10-2006 23:46 ]