Har tilføjet lidt mere kode. I starten af javascript-delen finder du en variabel der hedder lineLength = 10;
Det er den, der bestemmer hvor lang en linje må være. I det her tilfælde, 10 tegn. Der bliver indsat et html-linje skift (<br />
når antallet af tegn i en linje når op på lineLength værdien. Dvs. Lange ord bliver også delt.
Her er koden:
<head>
<style>
#Bubble {
position : absolute;
top : 50px;
left : 100px;
width : 250px;
height : 125px;
visibility : hidden;
overflow : hidden;
}
#BubbleTable {
background : url(bobbel.gif) no-repeat;
}
</style>
<script language='JavaScript'>
lineLength = 10; // Antallet af tegn pr. linie.
// Tjekker hvilken browser der bruges, og sætter event captures:
if (navigator.appName == 'Microsoft Internet Explorer'){
document.onkeypress = InternetExplore;
document.onkeydown = blockkeys; // Blokerer backspace.
}
if (navigator.appName != 'Microsoft Internet Explorer'){
document.onkeypress = OtherBrowsers;
}
function blockkeys() {
if (window.event && window.event.keyCode == 8) {
// try to cancel the backspace
InternetExplore(event); // Udfører det der skal udføres. (Sletter et tegn, opdaterer tekst osv.)
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
}
function InternetExplore(e){
which = window.event.keyCode; // Finder koden for tasten.
if(which == 16) { // Hvis der er tastet shift, må den ikke indsætte et tegn.
return false;
} else if(which == 13) { // Hvis der er tastet enter, skal den submitte formen.
document.getElementById("form").submit();
return false;
}
document.getElementById('Bubble').style.visibility = 'visible';// Viser boblen.
value = document.getElementById("besked").value;// Henter værdien fra input-boksen.
lineLength_nobr = value.replace(/<br \\/>/g,""); // Fjerner alle <br />.
chars = lineLength_nobr.length/lineLength; // Dividerer længden af linien u. <br /> med lineLength.
chars = chars+""; // Parser til String.
if(chars.indexOf(".") == "-1" && which != 8 && 0<value.length) {// Hvis divisionen går op, giver et heltal.
value += "<br />"; // Indsættes <br /> (liniskift)
}
if(which == 8) { // Hvis der tastes backspace, skal der slettes et tegn.
tmp = ""; // Initialiserer en midlertidig variabel.
for(i = 6; i >= 1; i = i-1) { // Tjekker de 6 sidste tegn.
tmp += value.charAt(value.length-i); // Indsætter værdierne i variablen.
}
if(tmp === "<br />") { // Hvis de seks sidste tegn er <br />, skal de slettes.
for(i = 6; i >= 1; i = i-1) {
value = value.slice(0,value.length-1);
}
} else {
value = value.slice(0,value.length-1); // Hvis ikke, skal der blot slettes eet tegn.
}
} else { // Ellers skal der indsættes et tegn.
value += String.fromCharCode(which);
}
document.getElementById("besked").value = value;// Input-boksen bliver opdateret.
document.getElementById('BubbleTable').innerHTML = value;// Sætter teksten i boblen til at være lig input-boksen.
if(value.length == 0) // Er der ingen tekst i input-boksen, bliver boblen lukket.
setTimeout("document.getElementById('Bubble').style.visibility = 'hidden';",10000);
return false; // Browseren skal ikke reagerer på tasterne.
}
function OtherBrowsers(e){
if(e.which == 16) { // Hvis der er tastet shift, må den ikke indsætte et tegn.
return false;
} else if(e.which == 13) { // Hvis der er tastet enter, skal den submitte formen.
document.getElementById("form").submit();
return false;
}
document.getElementById('Bubble').style.visibility = 'visible';// Viser boblen.
value = document.getElementById("besked").value;// Henter værdien fra input-boksen.
lineLength_nobr = value.replace(/<br \\/>/g,""); // Fjerner alle <br />.
chars = lineLength_nobr.length/lineLength; // Dividerer længden af linien u. <br /> med lineLength.
chars = chars+""; // Parser til String.
if(chars.indexOf(".") == "-1" && e.which != 8 && 0<value.length) {// Hvis divisionen går op, giver et heltal.
value += "<br />"; // Indsættes <br /> (liniskift)
}
if(e.which == 8) { // Hvis der tastes backspace, skal der slettes et tegn.
tmp = ""; // Initialiserer en midlertidig variabel.
for(i = 6; i >= 1; i = i-1) { // Tjekker de 6 sidste tegn.
tmp += value.charAt(value.length-i); // Indsætter værdierne i variablen.
}
if(tmp === "<br />") { // Hvis de seks sidste tegn er <br />, skal de slettes.
for(i = 6; i >= 1; i = i-1) {
value = value.slice(0,value.length-1);
}
} else {
value = value.slice(0,value.length-1); // Hvis ikke, skal der blot slettes eet tegn.
}
history.go(1);
} else { // Ellers skal der indsættes et tegn.
value += String.fromCharCode(e.which);
}
document.getElementById("besked").value = value;// Input-boksen bliver opdateret.
document.getElementById('BubbleTable').innerHTML = value;// Sætter teksten i boblen til at være lig input-boksen.
if(value.length == 0) // Er der ingen tekst i input-boksen, bliver boblen lukket.
setTimeout("document.getElementById('Bubble').style.visibility = 'hidden';",10000);
return false; // Browseren skal ikke reagerer på tasterne. Virker ikke i IE.
}
</script>
</head>
<body>
<form action='bobbel.html' method="post" id="form">
<input type='hidden' id='besked' name="Besked" />
</form>
<div id='Bubble'>
<table callpadding='0' cellspacing='0' width='250' height='125'>
<tr>
<td id='BubbleTable' align='center' valign='middle'></td>
</tr>
</table>
</div>
</body>
EDIT:
Du må gerne smide et link til den færdige side, så jeg kan se hvordan det virker IRL.
Indlæg senest redigeret d. 13.04.2007 02:39 af Bruger #4442