Form Text Größe in px stimmt nicht sofort
Ich habe da ein seltsames Probelm.
Schon vor einigen Zeit ist mir aufgefallen,
dass Dropdown- und Text-Felder trotz
gleicher Pixelzahlen eine unterschiedliche
Größe haben. Mit einer unschönen Ausgabe
Vor der Html-Seite stimmt dann alles wieder.
Aber es muss doch einen anderen Weg geben ?
Der hier verwendete Code
<script src="https://basti1012.bplaced.net/js_webseite/jquery.js"></script>
<div id="content">
<h1>Pixel länge eines Wortes ermitteln</h1>
<p>Bei keiner Angabe wird der Aktuelle Font-size des body ausgelesen.Oder geben sie selbst eine größe an.</p><br>
<label>Gebe hier ein Wort ein</label><input type="text" id="texte" value="Wort"> <span>font-size:</span><input type="number" min="1" max="100" value="" id="px">:px
<input type="button" id="los" value="Länge ermitteln"> <br>
<p id="ausgabe"></p>
<p id="errors"></p>
</div>
<script>
$(document).ready(function(){
var buchstabe;
$('#los').click(function(){
var end=0;
$('#errors').html('');
wort=$('#texte').val();
array=wort.split('');
for(ff=0;ff<=array.length-1;ff++){
staben=array[ff]
einzelnd=String(staben);
if (!isNaN(einzelnd)){
einzelnd='ZAHL';
}
switch (einzelnd){
case 'A':buchstabe = 12;break;
case 'B':buchstabe = 11;break;
case 'C':buchstabe = 11;break;
case 'D':buchstabe = 12;break;
case 'E':buchstabe = 10;break;
case 'F':buchstabe = 9;break;
case 'G':buchstabe = 12;break;
case 'H':buchstabe = 12;break;
case 'I':buchstabe = 5;break;
case 'J':buchstabe = 6;break;
case 'K':buchstabe = 12;break;
case 'L':buchstabe = 10;break;
case 'M':buchstabe = 14;break;
case 'N':buchstabe = 12;break;
case 'O':buchstabe = 12;break;
case 'P':buchstabe = 9;break;
case 'Q':buchstabe = 12;break;
case 'R':buchstabe = 11;break;
case 'S':buchstabe = 9;break;
case 'T':buchstabe = 10;break;
case 'U':buchstabe = 12;break;
case 'V':buchstabe = 12;break;
case 'W':buchstabe = 15;break;
case 'X':buchstabe = 12;break;
case 'Y':buchstabe = 12;break;
case 'Z':buchstabe = 10;break;
case 'a':buchstabe = 7;break;
case 'b':buchstabe = 8;break;
case 'c':buchstabe = 7;break;
case 'd':buchstabe = 8;break;
case 'e':buchstabe = 7;break;
case 'f':buchstabe = 5;break;
case 'g':buchstabe = 8;break;
case 'h':buchstabe = 8;break;
case 'i':buchstabe = 4;break;
case 'j':buchstabe = 4;break;
case 'k':buchstabe = 8;break;
case 'l':buchstabe = 4;break;
case 'm':buchstabe = 12;break;
case 'n':buchstabe = 8;break;
case 'o':buchstabe = 8;break;
case 'p':buchstabe = 8;break;
case 'q':buchstabe = 8;break;
case 'r':buchstabe = 5;break;
case 's':buchstabe = 6;break;
case 't':buchstabe = 4;break;
case 'u':buchstabe = 8;break;
case 'v':buchstabe = 8;break;
case 'w':buchstabe = 12;break;
case 'x':buchstabe = 8;break;
case 'y':buchstabe = 8;break;
case 'z':buchstabe = 7;break;
case '.':buchstabe = 4;break;
case ':':buchstabe = 4;break;
case ',':buchstabe = 4;break;
case ';':buchstabe = 4;break;
case '>':buchstabe = 9;break;
case '<':buchstabe = 9;break;
case '-':buchstabe = 5;break;
case '_':buchstabe = 8;break;
case '#':buchstabe = 8;break;
case '"':buchstabe = 7;break;
case '+':buchstabe = 9;break;
case '*':buchstabe = 8;break;
case '~':buchstabe = 9;break;
case '|':buchstabe = 3;break;
case '!':buchstabe = 5;break;
case '§':buchstabe = 8;break;
case '$':buchstabe = 8;break;
case '%':buchstabe = 13;break;
case '&':buchstabe = 12;break;
case '/':buchstabe = 4;break;
case '(':buchstabe = 5;break;
case ')':buchstabe = 5;break;
case '=':buchstabe = 9;break;
case '?':buchstabe = 7;break;
case '`':buchstabe = 5;break;
case '´':buchstabe = 5;break;
case '}':buchstabe = 8;break;
case '{':buchstabe = 8;break;
case ']':buchstabe = 5;break;
case '[':buchstabe = 5;break;
case '/':buchstabe = 4;break;
case 'ZAHL':buchstabe = 8;break;
default:buchstabe = 0;
$('#errors').html($('#errors').html()+'<br>Nicht gelesen = '+einzelnd)
}
pixel=$('#px').val();
if(pixel==''){
g=$('body').css('font-size')
pixel_angabe=g.replace('px','')
pii='Bei Aktuell benutzten font-size: von '+pixel_angabe+' Pixeln';
}else{
pixel_angabe=$('#px').val();
pii='Bei font-size:'+pixel_angabe+' Pixel';
}
normal=16;
einpixel=100/normal
neu=einpixel*pixel_angabe/100;
neu=buchstabe*neu;
end += neu;
$('#ausgabe').html('Pixel= '+end+'<br>'+pii);
}
});
});
</script>