ao clicar no input pagina rola pra baixo
Olá gente! Não sei se eu deveria postar isso em css ou aqui mas acho que é aqui!
Eu criei um blog recentemente e coloquei um widget na barra lateral direita. Esse widget informa o valor da grama do ouro. O problema é que quando vc clica no input para informar a quantidade de gramas ou o valor a pagina rola pra baixo. Não quero que isso aconteça!
o link do blog é esse: http://onjoias.blogspot.com
O codigo html é esse:
<div id="cotacao">
<span class="cotMoeda estrangeira">
<input type="text" id="estrangeiro" value="1" style="width: .63em;" />
<span class="symbol">g</span>
</span>
<span class="optional"> vale </span>
<span class="cotMoeda nacional">
<span class="symbol">R$</span>
<input type="text" id="nacional" value="132,00" style="width: 4.6em;" />
</span>
<span class="optional"> hoje</span>
<br class="clearfix" />
</div>
O codigo javascript é esse:
<script>
/ <![C@data[ /
elEst = elById('estrangeiro');
elNac = elById('nacional');
spans = [elEst.parentElement, elNac.parentElement];
isActivated = false;
MOEDA_ESTRANGEIRA = "g";
function elById(id) {
return document.getElementById(id);
}
function elByTag(tag) {
return document.getElementsByTagName(tag);
}
HashParams = (function() {
var params, param, value;
function reloadParams() {
var actualParams = window.location.hash.match(/^#(.*)=(.*)$/);
if (!actualParams) {
param = "";
value = ""
}
else if (actualParams != params) {
params = actualParams;
param = params[1];
value = params[2];
}
}
function setParam(param, value) {
unsetOnHashChanged();
window.location.replace("#" + param + "=" + value);
setOnHashChanged();
}
function setOnHashChanged() {
// para não disparar o hashchange depois do setParams
// o hashchange estava sendo disparado depois da execução do setParam
// não adiantava remover o event handler e depois colocá-lo de novo
window.setTimeout(function() {
if (window.addEventListener) {
window.addEventListener('hashchange', calcularComParamDaHash, false);
} else {
window.attachEvent('onhashchange', calcularComParamDaHash, false);
}
}, 100);
}
function unsetOnHashChanged() {
if (window.removeEventListener) {
window.removeEventListener('hashchange', calcularComParamDaHash, false);
} else {
window.detachEvent('onhashchange', calcularComParamDaHash, false);
}
}
function getParam() {
reloadParams();
return param;
}
function getValue() {
reloadParams();
return value;
}
return {
getParam: getParam,
getValue: getValue,
setParam: setParam,
setOnHashChanged: setOnHashChanged,
unsetOnHashChanged: unsetOnHashChanged
}
})();
function calculaCotacao(elDigitado, elDestino) {
if (elDigitado.value.match(/[^0-9\,]/g)){
elDigitado.value = elDigitado.value.replace(/[^0-9\,]/g, "");
}
txtDigitado = parseFloat(elDigitado.value.replace(',', '.'));
if (isNaN(txtDigitado)) {
elDestino.value = "0,00";
return;
}
if (elDigitado == elNac) {
elDestino.value = (txtDigitado /
132.00).toFixed(2);
}
else {
elDestino.value = (txtDigitado *
132.00).toFixed(2);
}
elDestino.value = elDestino.value.replace('.',',');
}
function ativaQuadrado(){
if (!document.body.className.match(/activated/)) {
document.body.className += " activated";
}
}
function desativaQuadrado(){
document.body.className = document.body.className.replace(/activated/g, "");
}
function redimensionaCampo(el) {
if (el.value.length < 3) {
if (el == elNac) {
el.style.width = "2.2em";
} else {
el.style.width = (el.value.length * 1.63) + "em";
}
} else if (el.value.length > 10) {
el.style.width = "6.7em";
} else {
if (el == elNac) {
el.style.width = (el.value.length * 0.65 - 1.3) + "em";
} else {
el.style.width = (el.value.length * 0.72 - 1.3) + "em";
}
}
}
function redimensionaCampos() {
redimensionaCampo(elEst);
redimensionaCampo(elNac);
}
function maximizaCampos() {
elEst.style.width = elNac.style.width = 6.6+"em";
}
function minimizaCampos() {
redimensionaCampos();
}
function consertaNumero(el) {
if (!el.value.match(/\d/)) {
el.value = "0,00";
} else if ((el.value.match(/^\d+(,\d*)?$/)) && (el == elNac)) {
// deixa somente 2 números depois da vírgula
el.value = parseFloat(el.value.replace(',', '.')).toFixed(2).replace('.', ',');
}
}
var width = window.innerWidth|| document.documentElement.clientWidth
|| document.body.clientWidth;
if (width < 642) {
// estrangeiro.select();
// TODO: ao clicar, não está dando o primeiro select
}
elEst.onfocus = elNac.onfocus = function() {
maximizaCampos();
ativaQuadrado();
isActivated = true;
var $this = this;
window.setTimeout(function(){ $this.select(); }, 300);
document.getElementById('cotacao').scrollIntoView(); // mobile
};
elEst.onblur = elNac.onblur = function() {
consertaNumero(this);
// caso clique pra focar no texto não redimensiona, pois pode focar bem rápido
window.setTimeout(function(){
if (!isActivated) {
minimizaCampos();
desativaQuadrado();
}
}, 300);
isActivated = false;
};
spans[0].onmouseover = spans[1].onmouseover = function() {
if (!isActivated) {
ativaQuadrado();
}
};
spans[0].onmousedown = spans[1].onmousedown = spans[0].onclick = spans[1].onclick = function(event) {
if (event.target.tagName != "INPUT") {
var input = event.currentTarget.getElementsByTagName('input')[0];
window.setTimeout(function(){
input.select();
input.focus()
}, 100);
}
};
spans[0].onmouseout = spans[1].onmouseout = function() {
if (!isActivated) {
desativaQuadrado();
}
};
function calcularComParamDaHash() {
var param = HashParams.getParam(), value = HashParams.getValue();
if (!value.match(/^\d+(,\d*)?$/)) {
return;
}
if (param == "real") {
elNac.value = value;
consertaNumero(elNac);
calculaCotacao(elNac, elEst);
HashParams.setParam("real", elNac.value);
// senão ele foca no último elemento editado (a outra moeda) e dispara o cálculo novamente e erroneamente
elNac.focus();
} else if (param == MOEDA_ESTRANGEIRA) {
elEst.value = value;
consertaNumero(elEst);
calculaCotacao(elEst, elNac);
HashParams.setParam(MOEDA_ESTRANGEIRA, elEst.value);
elEst.focus();
}
}
calcularComParamDaHash();
if (!isActivated) {
redimensionaCampos();
}
HashParams.setOnHashChanged();
elEst.onkeyup = function(event) {
if (!event) { event = window.event; }
if (event.keyCode != 9) { calculaCotacao(this, elNac); } // se não for tab
HashParams.setParam(MOEDA_ESTRANGEIRA, parseFloat(this.value.replace(',', '.')).toFixed(2).replace('.', ','));
};
elNac.onkeyup = function(event) {
if (!event) { event = window.event; }
if (event.keyCode != 9) { calculaCotacao(this, elEst); }
HashParams.setParam("real", parseFloat(this.value.replace(',', '.')).toFixed(2).replace('.', ','));
var moeda = document.getElementById('moeda');
if (this.value.indexOf('70000') == 0) {
moeda.innerHTML = '<img src="http://25.media.tumblr.com/1d465a2fb2a3ab30a1ce58d71c3f884a/tumblr_mvp6bwEHZ41rcotivo7_400.gif"/>';
}
};
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome) {
document.getElementById("aviso_chrome").className += " is";
}
document.getElementById('aviso_chrome').getElementsByTagName('a')[0].onclick = function(event) {
chrome.webstore.install();
return false;
};
/ ]]> /
</script>
Discussão (1)
Carregando comentários...