IE vil have det anderledes
HeyJeg er lige begyndt at rode med noget JS, og er selvfølgelig stødt ind i utallige problemer med browser kompatibilitet. Dette problem har jeg dog ikke været i stand til at løse; sandsynligvis fordi jeg ikke rigtig ved noget om hvordan browserne læser/burde læse koden. Det meste er fundet på nettet og derefter har jeg modificeret det en smule. Ideen er at man skal kunne tilføje ekstra form-felter samtidig med at den clearer deres value ved onFocus samt geninsætter værdien hvis feltet efterlades blankt.
Hele koden ser således ud:
<script type="text/javascript">
var counter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}
function addEventHandlers() {
var formInputs = document.getElementsByTagName('input');
for (var i = 0; i < formInputs.length; i++) {
var theInput = formInputs[i];
if (theInput.type == 'text' && theInput.className.match(/\bcleardefault\b/)) {
/* Add event handlers */
addEvent(theInput, 'focus', clearDefaultText, false);
addEvent(theInput, 'blur', replaceDefaultText, false);
/* Save the default value */
if (theInput.value != '') {
theInput.defaultText = theInput.defaultValue;
}
}
}
}
function clearDefaultText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;
if (target.value == target.defaultText) {
target.value = '';
}
}
function replaceDefaultText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;
if (target.value == '' && target.defaultText) {
target.value = target.defaultText;
}
}
function addEvent(element, eventType, lamdaFunction, useCapture) {
if (element.addEventListener) {
element.addEventListener(eventType, lamdaFunction, useCapture);
return true;
} else if (element.attachEvent) {
var r = element.attachEvent('on' + eventType, lamdaFunction);
return r;
} else {
return false;
}
}
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
addEventHandlers();
}
window.onload = init;
</script>
</head>
<body>
<div id="readroot" style="display: none; width: 150px; float:left;">
<input type="image" src="images/delete.jpg" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" class="inputRemove" />
<select name="ugedag" style="float:left;">
<option>Vælg dag</option>
<option value="mandag">Mandag</option>
<option value="tirsdag">Tirsdag</option>
<option value="onsdag">Onsdag</option>
<option value="torsdag">Torsdag</option>
<option value="fredag">Fredag</option>
<option value="lørdag">Lørdag</option>
<option value="Søndag">Søndag</option>
</select><br /><br />
<input type="text" id="start_tid" name="start_tid" value="Start tid" style="color:#999999" class="cleardefault" /><br />
<input type="text" id="slut_tid" name="slut_tid" value="Slut tid" style="color:#999999" class="cleardefault" /><br />
<input type="text" value="Hej" class="cleardefault" />
</div>
<form method="post" name="form1" action="index.php?submitted=1">
<input type="button" id="moreFields" value="Tilføj dag" />
<input type="submit" value="Send form" /><br /><br />
<span id="writeroot"></span>
</form>
Det hele fungerer fint nok i Firefox, Opera og Safari som jeg har testet det på, men IE clearer ikke felternes value. Hvis jeg derimod kører addEventHandler() funktionen i starten af moreFields() funktionen i stedet for i slutningen som det står i ovenstående virker det i IE, men hverken i FF, Opera eller Safari...
Håber i forstår hvad jeg mener. Har prøvet at søge på nettet, men kunne ikke lige komme på de rigtige søgeord uden at skrive en halv stil :P
På forhånd tak
