Avatar billede 16sixten Nybegynder
09. januar 2007 - 15:38 Der er 3 kommentarer og
1 løsning

Begrænset indtastning

Hej eksperter  :o)

Jeg har et onscreen-tastatur (java-script), som sender indtastningerne direkte til et søgefelt. Jeg har et ønske om, at det skal være muligt kun at indtaste op til et bestemt antal karakterer i feltet. Siden ser sådan her ud:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>lme3</title>
<base target="nederst">

<script type="text/javascript" src="applications\helpbox.js"></script>

</head>

<body background="graphics/background/background_centre.jpg" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<form method="POST" action="artistdb2.asp" target="centralframe">

<table border="0" width="100" cellspacing="0" cellpadding="0" height="30" id="bottom_help" style="position: absolute; left: 924px; top: 610px">
  <tr>
    <td>
    <a onClick="return show_hide_box(this,190,190,'2px dotted')" href="help/help_artistdb_search.htm">
    <img border="0" src="graphics/menubuttons/bottom/menubutton_help.gif" width="100" height="30"></a></td>
  </tr>
</table>

  <table border="0" width="1024" cellpadding="0" style="border-collapse: collapse" height="610" id="table3">
    <tr>
      <td>
  <div align="center">
    <div align="center">
    <table border="0" cellpadding="0" id="table8" style="border-collapse: collapse" background="graphics/keyboards/keyboard_full.gif">
      <tr>
        <td>
        <!--webbot bot="Include" U-Include="keyboards/artistdb_keyboard.htm" TAG="BODY" startspan -->

<p align="center"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:Barmeno Bold;font-size:small;}
#tastatur td{padding:10px;font-size:15pt;border:0px;width:1em;text-align:center;cursor:pointer;}
</style>
<script language="javascript" type="text/javascript">
var taster = new Array();
taster[0] = ['A','B','C','D','E','F','G','H','I','J'];
taster[1] = ['K','L','M','N','O','P','Q','R','S','T'];
taster[2] = ['U','V','W','X','Y','Z','','','',''];
taster[3] = ['1','2','3','4','5','6','7','8','9','0'];
taster[4] = ['Æ','Ø','Å','Ä','Ö','É','&',"'",'.',','];
window.onload = function(){
  var t = document.getElementById('tastatur'),newTr,newTd,newTxt;
  var newTable = document.createElement('table');
  t.appendChild(newTable);
  var newTbody = document.createElement('tbody');
  newTable.appendChild(newTbody);
  for(i=0;taster.length>i;i++){
    newTr = document.createElement('tr');
    newTbody.appendChild(newTr);
    for(j=0;taster[i].length>j;j++){
      newTd = document.createElement('td');
      newTr.appendChild(newTd);
      newTxt = document.createTextNode(taster[i][j]);
      newTd.appendChild(newTxt);
      newTd.onclick = function(){addText(this);};
    }
  }
  newTr = document.createElement('tr');
  newTbody.appendChild(newTr);
  newTd = document.createElement('td');
  newTr.appendChild(newTd);
  newTxt = document.createTextNode(" ");
  newTd.appendChild(newTxt);
  newTd.onclick = function(){addText(this);};
  newTd.colSpan = 5;
  newTd.style.height = "43px";

  newTd = document.createElement('td');
  newTr.appendChild(newTd);
  newTxt = document.createTextNode("");
  newTd.appendChild(newTxt);
  newTd.onclick = function(){var ta = document.getElementById('intelli_artist');ta.value=ta.value.substring(0,ta.value.length-1);};
  newTd.colSpan = 5;
  newTd.style.height = "43px";
}
function addText(elm){
  var ta = document.getElementById('intelli_artist');
  ta.value += elm.firstChild.nodeValue;
}
</script>
<title>lme3</title>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<div id="tastatur">
  <p align="center"></div>
<!--webbot bot="Include" i-checksum="29077" endspan --></td>
      </tr>
    </table>
    <table border="0" cellpadding="0" style="border-collapse: collapse" id="table7">
      <tr>
        <td align="center" height="75" colspan="2">
  &nbsp;</td>
      </tr>
      <tr>
        <td align="center" height="40">
  <p align="right">
  <input type="text" name="intelli_artist" size="25" value="<%=Server.HtmlEncode(Request("intelli_artist"))%>" style="font-family: Barmeno Regular; font-size: 12pt; letter-spacing: 1; border-style: solid; border-width: 0px; padding-left: 6px; padding-right: 0px; padding-top: 5px; padding-bottom: 0px; font-variant:small-caps; height:28; background-image:url('graphics/textboxes/textbox_search_25.gif'); font-weight:bold; text-align:center"></td>
        <td align="center" height="40">
  <p align="left">&nbsp;&nbsp;<input type="submit" value=" " name="send" style="padding:0px; border-style:solid; border-width:0px; background-image:url('graphics/buttons/button_gray_search.gif'); width:81; height:35"><input type="reset" value=" " name="clear" style="padding:0px; border-style:solid; border-width:0px; background-image:url('graphics/buttons/button_gray_clear.gif'); width:81; height:35"></td>
      </tr>
      </table>
  </div>
  </div>
      </td>
    </tr>
  </table>
</form>

<table border="0" width="1024" cellspacing="0" cellpadding="0" height="30" id="bottom_all" style="position: absolute; top: 610px; left: 0px; width: 1024px; height: 30px; z-index: -1" align="left">
  <tr>
    <td>
    <!--webbot bot="Include" U-Include="applications/bottom_backbutton_normal.htm" TAG="BODY" startspan -->

<table border="0" cellpadding="0" style="border-collapse: collapse" id="table1" background="graphics/background/background_bottom_all.jpg" height="30" width="1024">
  <tr>
    <td align="center" width="100"><a href="java script:history.go(-1)" target="centralframe">
    <img border="0" src="graphics/menubuttons/bottom/menubutton_back.gif" width="100" height="30"></a></td>
    <td>&nbsp;</td>
  </tr>
  </table>

<!--webbot bot="Include" i-checksum="5962" endspan --></td>
  </tr>
</table>

</body>

</html>
Avatar billede phliplip Nybegynder
09. januar 2007 - 16:03 #1
set attributten maxlength="X" på dit <input> tag..
Avatar billede 16sixten Nybegynder
11. januar 2007 - 08:27 #2
Det kunne jeg ikke få til at virke... Det jeg helt præcis ønsker mig, er at der i et felt f.eks. kun må indtastes 5 karakterer. Hvis brugeren forsøger at indtaste den 6. karakter, skal der ingenting ske - altså ingen yderligere indtastning og ingen fejlbesked i nyt vindue. Kan det lade sig gøre?
Avatar billede phliplip Nybegynder
11. januar 2007 - 19:56 #3
function addText(elm) {
  var ta = document.getElementById('intelli_artist');
  if(ta.value.length < 6) {
    ta.value += elm.firstChild.nodeValue;
  }
}

Skift addText ud med ovenstående; Tjekker om strengen der i input feltet er kortere end 6 karakterer.. hvis ja så indsæt tegnet!
Avatar billede 16sixten Nybegynder
17. januar 2007 - 09:30 #4
Tak for hjælpen phliplip. Det virker helt perfekt...  :o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester