[JS] karakters van input value veranderen

[Reveller]

Ik heb 2 input boxen: in de eerste typt de gebruiker een zin, in de tweede moet die zin worden overgenomen, maar:

• spaces moeten worden vervangen door een underscore
• alle niet-alfabetische karakters (zoals ? > < % &) moeten genegeerd worden
• hoofdletters moeten klein gemaakt worden

De bedoeling is dat de gebruiker in de "title" box tikt, maar het moet ook mogelijk zijn om rechtstreeks in de "url" box te tikken. Als de gebruiker rechtstreeks in de url box tikt:

• moeten alle karakters buiten alfabetisch en cijfers genegeerd worden (als iemand dus een "/" tikt, moet er niets gebeuren in de input box
• de value van "url" mag niet numeriek zijn ("2004" mag dus niet, "jaar2004" dus weer wel)

Ik heb nu dit:

code:

<script>
function alias()
{
  document.getElementById('url').value = 
  document.getElementById('title').value.replace(/[^a-z0-9 ]/ig,'').replace(/ /g, '_').toLowerCase()
}
</script>

title: <input type="text" name="title" id="title" size="30" onkeyup="alias();">
url: <input type="text" name="url" id="url" size="30">

Probleem:

• door de toevoeging van .toLowerCase() aan het scriptje, worden de spaties niet meer vervangen door underscores. Waarom niet?
• hoe kan ik het invoeren van niet-alafabetische of numerieke waardenin de "url" input negeren?

[crisp]

waarom sta je niet gewoon alles toe en urlencode je het niet achteraf?

[André]

Reveller schreef op vrijdag 10 december 2004 @ 23:39:

• door de toevoeging van .toLowerCase() aan het scriptje, worden de spaties niet meer vervangen door underscores. Waarom niet?

Ik ben nooit zo'n fan van dit soort contructies waar alle methodes achter elkaar aangeroepen worden, ik plaats er altijd haakjes omheen zodat ze 1 voor 1 uitgevoerd worden. Volgens mij werkt dat ook minder foutgevoelig:

code:

(((document.getElementById('title').value).replace(/[^a-z0-9 ]/ig,'')).replace(/ /g, '_')).toLowerCase();

• hoe kan ik het invoeren van niet-alafabetische of numerieke waardenin de "url" input negeren?

Door met het onkeydown event te checken welke toets ingedrukt word, en als het een 'verkeerde' is kun je het event cancellen waardoor de letter niet op het scherm komt.

[ Voor 27% gewijzigd door André op 11-12-2004 10:33 ]

[drm]

André:
Ik ben nooit zo'n fan van dit soort contructies waar alle methodes achter elkaar aangeroepen worden, ik plaats er altijd haakjes omheen zodat ze 1 voor 1 uitgevoerd worden. Volgens mij werkt dat ook minder foutgevoelig.

Dat is natuurlijk dikke onzin Geef eens 1 goed voorbeeld waarbij het mis zou kunnen gaan als je geen haakjes plaatst bij method calls. Als je het dan echt overzichtelijker wilt maken, indent dan gewoon goed, of gebruik temp variabelen:

JavaScript:

document.getElementById ( 'title' ).value =
   document.getElementById ( 'title' ).value
    .replace ( /[^a-z0-9 ]/ig,'' )
    .replace ( / /g, '_' ) 
    .toLowerCase();
// of
var obj = document.getElementById ( 'title' );
obj.value = obj.value.replace ( /[^a-z0-9 ]/ig,'' );
obj.value = obj.value.replace ( / /g, '_' );
obj.value = obj.value.toLowerCase ();

[Reveller]

Bedankt iedereen die tot zover geholpen heeft. @Crisp: ik denk dat deze post een heleboel duidelijk maakt. Ik heb nu het volgende form:



De werking in het kort:

• in de linker selectbox staan de pagina's van de website in boomstructuur
• rechts staat van elke pagina de alias
• als je links een pagina selecteert, wordt de bijbehorende alias rechts geselecteerd. Vervolgens wordt de URL voor de onderste input box gezet
• de gebruiker kan nu een titel voor een nieuwe pagina intikken. Automatisch wordt in de onderste input box de alias gevormd. Ik maak hier de pagina http://site.com/over_ons/wij/ted_raket aan.

Het gebruik van twee aparte select boxen hiervoor is alleen wat omslachtig. Het leek oorspronkelijk een goed idee, maar nu lijkt dit me veel overzichtelijker:



Deze oplossing zorgt alleen voor twee problemen:

• ik moet bij elke option ontzettend veel &nbsp's gebruiken om te indenten tussen de pagina titels en aliases
• ik ben bang dat mijn huidige scriptjes niet meer voldoen

Vandaar mijn twee vragen:

• Zou jij voor 1 of 2 option lists kiezen of een geheel andere oplossing?
• Heb je enig idee in hoeverre ik de javascript zal moeten aanpassen of opnieuw bouwen?

Voor geinteresseerden hieronder de code van het form in zijn huidige staat:

Java:

<script>
function alias()
{
  var alias = document.getElementById('title').value;
  alias = alias.replace(/[^a-z0-9 ]/ig,'');
  alias = alias.replace(/ /g, '_');
  alias = alias.toLowerCase()

  document.getElementById('alias').value = alias;
}

function chars()
{
  var alias = document.getElementById('alias').value;
  alias = alias.replace(/[^a-z0-9_]/ig,'');
  alias = alias.replace(/ /g, '_');
  alias = alias.toLowerCase()

  document.getElementById('alias').value = alias;
}

function selectAlias(o)
{
  var i = o.selectedIndex;
  document.getElementById('aliasList').options[i].selected = true;
  getPath(document.getElementById('aliasList'));
}

function selectTitle(o)
{
  var i = o.selectedIndex;
  document.getElementById('titleList').options[i].selected = true;
}


function getPath(o)
{
  var i = o.selectedIndex + 1;
  var aRet = new Array();
  var iNumT = null;

  while (i--)
  {
    var sHTML = o.options[i].innerHTML;
    sText = sHTML.replace( /\&nbsp;/g, " " );
    var t = 0;

    while (sText.charCodeAt(t) == 32)
        t++;

    if (iNumT == null) {
      iNumT = t - 2;
      aRet.unshift(sText.substr(t));
      continue;
    }

    if (t == iNumT) {
      iNumT = iNumT - 2;
      aRet.unshift(sText.substr(t));

      if (t == 0)
        break;
    }
  }

  var sRet = "";

  for (var i = 0; i < aRet.length; i++)
    if (aRet[i] == 'Home')
      sRet += 'http://localhost/';
    else
      sRet += aRet[i]+"/";

  document.getElementById('url').innerHTML = sRet;
}
</script>

HTML:

<table>
  <tr>
    <td valign="top">Titel: </td>
    <td>
      <select size="10" name="titleList" id="titleList" onchange="selectAlias(this);">
        <option value="1">Home</option>
        <option value="2">&nbsp;&nbsp;Over Ons</option>
        <option value="5">&nbsp;&nbsp;&nbsp;&nbsp;Management Team</option>
        <option value="6">&nbsp;&nbsp;&nbsp;&nbsp;Stervelingen</option>
        <option value="3">&nbsp;&nbsp;contact</option>
      </select>
    </td>
    <td valign="top">Alias: </td>
    <td>
      <select size="10" name="aliaslist" id="aliaslist" onchange="getPath(this); selectTitle(this);">
        <option value="1">http://site.com</option>
        <option value="2">&nbsp;&nbsp;over_ons</option>
        <option value="5">&nbsp;&nbsp;&nbsp;&nbsp;management</option>
        <option value="6">&nbsp;&nbsp;&nbsp;&nbsp;wij</option>
        <option value="3">&nbsp;&nbsp;contact</option>
      </select>
    </td>
  </tr>
</table>
<br>
<br>
<table>
  <tr>
    <td>Titel:</td>
    <td><input type="text" name="title" id="title" size="30" onkeyup="alias();"></td>
  </tr>
  <tr>
    <td>URL: <span id="url"></span></td>
    <td><input type="text" name="alias" id="alias" size="30" onkeyup="chars();"></td>
  </tr>
</table>

[Reveller]

Ook een optie: een DHTML option list. Heeft iemand hier ervaring mee?

[gsteen]

Zou jij voor 1 of 2 option lists kiezen of een geheel andere oplossing?

Wat je presenteert in de option lists zijn dingen die een relatie hebben, maar ook wel weer redelijk los van elkaar staan. Zelf zou ik hier voor 2 option lists kiezen, omdat ik dit overzichtelijker vind dan 1 option list.

Ik heb wel een aanmerking op je functies alias() en chars(). Deze voren vrijwel dezelfde code uit. Is beetje onnodig vind ik. Je zou het ook zo kunnen doen:

Java:

function setInput(o) 
{ 
  var alias = document.getElementById(o.id).value; 
  alias = alias.replace(/[^a-z0-9 ]/ig,''); 
  alias = alias.replace(/ /g, '_'); 
  alias = alias.toLowerCase();

  document.getElementById('alias').value = alias; 
}

en bij je input elementen deze fuctie als: "setInput(this);" aanroepen.