Hola, se que me he explicado mal, pero lo que quiero hacer, es, que, en esta web:
http://www.addictools.com
Si la veis con firefox, al escribid una palabra, veréis que sale una cruz para borrar el campo, pero, cuando le has dado a la cruz, en vez de mantenerse el cursor sobre el input, se aleja de el, por lo que tienes que clickar otra vez en el input text, para volver a escribid.
Ahora, miradla en safari, en safari, esto no ocurre, si no que al clickar en la cruz, sigue el cursor en el input.
Este es el código en js:
//----------------------------------------------------------
if (!applesearch) var applesearch = {};
//----------------------------------------------------------
applesearch.init = function ()
{
var srchform = document.getElementById('searchform');
// Paranoia! Make sure we can get the search form before trying anything
if(srchform) {
var srchinput = document.getElementById('query');
labelText = applesearch.getLabelText();
// add applesearch css for non-safari, dom-capable browsers
if ( navigator.userAgent.toLowerCase().indexOf('safari' ) < 0 && document.getElementById ) {
this.clearBtn = false;
// add style sheet if not safari
var dummy = document.getElementById("dummy_css");
if (dummy) dummy.href = "http://www.addictools.com/includes/applesearch.css";
//------------------
// create and attach the span
var r_crnr = document.createElement('span');
r_crnr.className = 'sbox_r'; // IE win doesn't like setAttribute in this case
r_crnr.setAttribute('id','srch_clear');
var fieldsets = srchform.getElementsByTagName('fieldset');
if (fieldsets) {
fieldsets[0].appendChild(r_crnr);
}
// Create and attach a clearing div, keeps Opera happy
var d_clr = document.createElement('div');
d_clr.setAttribute('class','clear');
srchform.appendChild(d_clr);
//------------------
// set our text colors
var labels = srchform.getElementsByTagName('label');
if (labels) {
if (labels[0].currentStyle) {
// must be using IE
labelColor = labels[0].currentStyle.color;
inputColor = srchinput.currentStyle.color;
} else if (document.defaultView.getComputedStyle) {
labelColor = document.defaultView.getComputedStyle(labels[0], null).getPropertyValue('color');
inputColor = document.defaultView.getComputedStyle(srchinput, null).getPropertyValue('color');
}
}
//------------------
// Paranoia again! Make sure the search field exist
if(srchinput) {
// set the placeholder text based off the label
srchinput.value = labelText;
srchinput.style.color = labelColor;
// add some events to the input field
srchinput.onkeyup = function () {
applesearch.onChange('query','srch_clear');
}
srchinput.onfocus = function () {
if (this.value == labelText) {
this.value = '';
this.style.color = inputColor;
}
}
srchinput.onblur = function () {
if (this.value == '') {
this.value = labelText;
this.style.color = labelColor;
}
}
}
// prevent the form being submitted if the input's value is the placeholder (label) text
srchform.onsubmit = function()
{
if(srchinput && srchinput != labelText) {
return true;
} else {
return false;
}
}
} else {
// Paranoia again! Make sure the search field exist
if(srchinput) {
// Using Safari so change some attributes to get the Apple Search field
srchinput.type = 'search';
srchinput.setAttribute('placeholder',labelText);
srchinput.setAttribute('autosave','bsn_srch');
srchinput.setAttribute('results','5');
}
}
}
}
//----------------------------------------------------------
applesearch.getLabelText = function()
{
var srchform = document.getElementById('searchform');
if(srchform) {
var labels = srchform.getElementsByTagName('label');
if (labels) {
var labelFor = labels[0].getAttribute('for');
var labelText = labels[0].firstChild.nodeValue;
} else {
// just in case, set default text
var labelText = '';
}
} else {
// just in case, set default text
var labelText = '';
}
return labelText;
}
//----------------------------------------------------------
// called when on user input - toggles clear fld btn
applesearch.onChange = function (fldID, btnID)
{
// check whether to show delete button
var fld = document.getElementById( fldID );
var btn = document.getElementById( btnID );
if (fld.value.length > 0 && fld.value != labelText && !this.clearBtn) {
btn.className = 'sbox_r_f2';
btn.fldID = fldID; // btn remembers it's field
btn.onclick = this.clearBtnClick;
this.clearBtn = true;
} else if (fld.value.length == 0 && this.clearBtn) {
btn.className = 'sbox_r';
btn.onclick = null;
this.clearBtn = false;
// reset the field's placeholder text
fld.value = '';
fld.style.color = labelColor;
}
}
//----------------------------------------------------------
applesearch.clearFld = function (fldID,btnID)
{
var fld = document.getElementById( fldID );
fld.value = '';
this.onChange(fldID, btnID);
}
//----------------------------------------------------------
applesearch.clearBtnClick = function ()
{
applesearch.clearFld(this.fldID, this.id);
}
//----------------------------------------------------------
window.onload = function () { applesearch.init(); }
//----------------------------------------------------------
Alguien podría ayudarme? Gracias.
