Este artigo descreve o método de passar valores entre o foco dos componentes JavaScript e os pontos de ancoragem intra-página. Compartilhe para sua referência. A análise específica é a seguinte:
As duas pequenas funções mencionadas acima são muito úteis em algumas novas páginas de telefone celular.
Como acionar um evento quando o cursor é colocado na caixa de entrada e acionar outro evento quando o cursor é colocado na caixa de entrada? Mesmo que o usuário não entre em nada ...
É simples passar valores entre as páginas, mas como passar valores entre as âncoras dentro da página?
1. Objetivos básicos
Há uma página com uma caixa de entrada e um hiperlink nela. Essas duas coisas não têm conexão.
É que a função não é grande, então eu escrevo as duas funções juntas
1. Função da caixa de entrada
Depois que o cursor é colocado na caixa de diálogo, o plano de fundo fica vermelho e, uma vez que o mouse do usuário clicar em outro lugar, ele fica cinza novamente.
2. Função de hiperlink
Passe o valor do texto = 1 para o ponto de ancoragem inferior na parte inferior abaixo da página através do método GET. Há uma caixa de entrada desativada abaixo do ponto de ancoragem inferior, e o parâmetro de texto na barra de endereço de votação é constantemente
Inicie se você não clicar, não há parâmetro de texto, então a caixa de entrada é sempre exibida como nula
Depois que o hiperlink é clicado, a caixa de diálogo abaixo se torna 1 após 0,5 segundos. Como é processado em milissegundos, o sentimento do usuário é processado em tempo real.
Há também um hiperlink traseiro acima deste desativado. Limpe os parâmetros da página e puxe a barra de rolagem novamente e exiba -a como nula novamente.
Observe que quando o valor é transmitido com sucesso entre as âncoras na página, o URL do navegador:
2. Processo de produção
Não há necessidade de introduzir nenhum plug-ins, basta abrir uma página HTML para gravar. Consulte o seguinte código:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> onfoucs </title>
</head>
<Body>
<!-Defina uma caixa de entrada. Onfocus é obter foco. Depois que o cursor for colocado na caixa de entrada, o parâmetro getFocus () será acionado imediatamente. Onblur perde o foco, e o Onfocus se vira o contrário. ->
<p>
<input type = "text" onfocus = "getfocus ()" onblur = "lostfocus ()"/>
</p>
<!-Observe a sintaxe dos hiperlinks para parâmetros passados por pontos de âncora na página. Use "Parâmetros de conexão" e, em seguida, use #Connect Anchor Points. Para vários parâmetros, escreva-os como "texta = 1 & textb = 2#em baixo, use" & link->
<p>
<a href = "onfocus.html? text = 1#inferior"> âncoras </a>
</p>
<!-tantos lis são usados apenas para ocupar a linha ~ para permitir que todos vejam o efeito âncora->
<li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> <li> <li> </li> <li> <li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> <li> <li> </li> <li> <li>
<!-este hiperlink é equivalente ao botão de volta->
<p>
<a id = "inferior" href = "javascript: history.go (-1);"> back </a>
</p>
<!-Eu sou a caixa de diálogo desativada->
<p>
<input type = "text" id = "pollingText" desativado = "desativado"/>
</p>
</body>
</html>
<Cript>
/*Primeiro altere a cor de fundo da página para #eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
window.onload = function () {
document.bgcolor = "#eeeeee";
Polling ();
}
/* Quando a caixa de diálogo tiver foco, altere a cor do fundo para vermelho, caso contrário, altere -o para #eeeeee*/
função getFocus () {
document.bgcolor = "#ff0000";
}
function losefocus () {
document.bgcolor = "#eeeeee";
}
/*Esta é uma expressão regular dedicada para os parâmetros ao tomar o URL dos valores passados*/
função geturlparam (nome) {
var reg = novo regexp ("(^| &)" + nome + "= ([^&]*) (& | $)");
var r = window.location.search.substr (1) .match (reg);
if (r! = null) retorna unescape (r [2]); retornar nulo;
}
/*Polícia constantemente para verificar se o parâmetro Get é passado*/
função síncrona () {
Document.getElementById ("PollingText"). Value = getUrlParam ("texto");
}
função polling () {
síncrono();
setInterval ("síncrono ()", 500);
}
</script>
Espero que este artigo seja útil para a programação JavaScript de todos.