Guten Morgen,
Ich beschäftige mich seit ein paar Wochen via learning by doing mit dem thema html und mitlerweile auch mit javascript. Nun stehe ich aber vor einem Problem wo ich nicht weiter komme.
Und zwar:
von einer Steuerung (SPS) werden Informationen in einem Touchscreen angezeigt. (diese werde ich in das oberes Textfeld einfügen).
Mit dem klick auf dem Button Abschicken, soll mir der Inhalt in das nächste Textfeld kopiert werden und da möchte ich den Text mit einer virtuellen Tastatur am Touchscreen bearbeiten.
Dazu hab ich dann zwei fragen:
1) Momentan habe ich einfach nur die großen Buchstaben und Zahlen, ist es irgendwie möglich noch eine Taste einzufügen und bei betätigung dieser kann ich dann von kleinen Buchstaben auf große umschalten ?!
2) wenn ich den Text aus dem ersten Feld in das zweite kopiert habe und den Text da mit der virtuellen Tastatur bearbeiten will, werden die Zeichen/Buchstaben/Zahlen immer am ende angehangen.
Aber theoretisch stelle ich mir das ganze so vor, dass ich in das Textfeld an eine bestimmte Stelle klicke und dort dann einen Buchstabe entfernen kann und/oder was einfügen kann .
Weiß einer wie man das realisiern kann ?
Zum besseren Verständniss hier einmal der aktuelle Stand:
HTML
<html>
<head>
<title>Keyboard</title>
<style type="text/css">
<!--
.input {
font-family: Tahoma, sans-serif;
font-size: 11px;
background-color: #F4F4F6;
color: ##003366;
border:1px solid #003366;
width: 30px;
height: 30px;
}
.input_s {
font-family: Tahoma, sans-serif;
font-size: 11px;
background-color: #F4F4F6;
color: ##003366;
border:1px solid #003366;
width: 300px;
height: 30px;
}
.input_r {
font-family: Tahoma, sans-serif;
font-size: 11px;
background-color: #F4F4F6;
color: ##003366;
border:1px solid #003366;
width: 60px;
height: 30px;
}
.display {
font-family: Tahoma, sans-serif;
font-size: 18px;
background-color: #F4F4F6;
color: ##003366;
border:1px solid #003366;
width: 450px;
height: 30px;
}
-->
</style>
<script language="JavaScript">
<!--
function add(Zeichen)
{
window.document.Keyboard.Display.value =
window.document.Keyboard.Display.value + Zeichen;
}
function backspace() {
document.Keyboard.Display.value = document.Keyboard.Display.value.substring(0,document.Keyboard.Display.value.length-1);
}
//-->
</script>
<script language="JavaScript">
function doit(){
document.getElementById('f11').value = document.getElementById('f22').value;
//value=document.getElementById('i1').value;
}
</script>
</head>
<body bgcolor=#ffffff>
<input onClick="doit()" type="submit" name="Submit" value="Abschicken">
<table id="info">
<caption class="Drucker"><b>Drucker</b> </caption>
<tr>
<td id=Zelle_mitte>
<div id=Zelle_innen3>
<input id="f22" class="display" name="Display" size=30 maxlength=30>
</div>
<td id=Zelle_mitte2>
<td id=Zelle_kopie3>
</tr>
</table>
<form name="Keyboard">
<table border=0 cellpadding=0 cellspacing="0">
<tr>
<td id="feld" bgcolor=#C0C0C0><input id="f11" class="display" name="Display" size=30 maxlength=30></td>
</tr>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing="0">
<tr>
<td ><input class="input" type=button value=" 1 " onClick="add('1')"></td>
<td ><input class="input" type=button value=" 2 " onClick="add('2')"></td>
<td ><input class="input" type=button value=" 3 " onClick="add('3')"></td>
<td ><input class="input" type=button value=" 4 " onClick="add('4')"></td>
<td ><input class="input" type=button value=" 5 " onClick="add('5')"></td>
<td ><input class="input" type=button value=" 6 " onClick="add('6')"></td>
<td ><input class="input" type=button value=" 7 " onClick="add('7')"></td>
<td ><input class="input" type=button value=" 8 " onClick="add('8')"></td>
<td ><input class="input" type=button value=" 9 " onClick="add('9')"></td>
<td ><input class="input" type=button value=" 0 " onClick="add('0')"></td>
<td ><input class="input" type=button value=" ß " onClick="add('ß')"></td>
<td ><input class="input_r" type=button value=" <--- " onClick="backspace()"></td>
<td ><input class="input_r" type=reset value=" RESET "></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing="0">
<tr>
<td width="11"></td>
<td ><input class="input" type=button value=" Q " onClick="add('Q')"></td>
<td ><input class="input" type=button value=" W " onClick="add('W')"></td>
<td ><input class="input" type=button value=" E " onClick="add('E')"></td>
<td ><input class="input" type=button value=" R " onClick="add('R')"></td>
<td ><input class="input" type=button value=" T " onClick="add('T')"></td>
<td ><input class="input" type=button value=" Z " onClick="add('Z')"></td>
<td ><input class="input" type=button value=" U " onClick="add('U')"></td>
<td ><input class="input" type=button value=" I " onClick="add('I')"></td>
<td ><input class="input" type=button value=" O " onClick="add('O')"></td>
<td ><input class="input" type=button value=" P " onClick="add('P')"></td>
<td ><input class="input" type=button value=" Ü " onClick="add('Ü')"></td>
<td ><input class="input" type=button value=" + " onClick="add('+')"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing="0">
<tr>
<td width="28"></td>
<td ><input class="input" type=button value=" A " onClick="add('A')"></td>
<td ><input class="input" type=button value=" S " onClick="add('S')"></td>
<td ><input class="input" type=button value=" D " onClick="add('D')"></td>
<td ><input class="input" type=button value=" F " onClick="add('F')"></td>
<td ><input class="input" type=button value=" G " onClick="add('G')"></td>
<td ><input class="input" type=button value=" H " onClick="add('H')"></td>
<td ><input class="input" type=button value=" J " onClick="add('J')"></td>
<td ><input class="input" type=button value=" K " onClick="add('K')"></td>
<td ><input class="input" type=button value=" L " onClick="add('L')"></td>
<td ><input class="input" type=button value=" Ö " onClick="add('Ö')"></td>
<td ><input class="input" type=button value=" Ä " onClick="add('Ä')"></td>
<td ><input class="input_r" type=submit value=" ENTER "></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing="0">
<tr>
<td width="43"></td>
<td ><input class="input" type=button value=" Y " onClick="add('Y')"></td>
<td ><input class="input" type=button value=" X " onClick="add('X')"></td>
<td ><input class="input" type=button value=" C " onClick="add('C')"></td>
<td ><input class="input" type=button value=" V " onClick="add('V')"></td>
<td ><input class="input" type=button value=" B " onClick="add('B')"></td>
<td ><input class="input" type=button value=" N " onClick="add('N')"></td>
<td ><input class="input" type=button value=" M " onClick="add('M')"></td>
<td ><input class="input" type=button value=" , " onClick="add(',')"></td>
<td ><input class="input" type=button value=" . " onClick="add('.')"></td>
<td ><input class="input" type=button value=" - " onClick="add('-')"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border=0 cellpadding=0 cellspacing="0">
<tr>
<td width="63"></td>
<td ><input class="input_s" type=button value=" Space " onClick="add(' ')"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>