2

Estou estudando faz pouco tempo e atualmente estou com um desafio que não consegui vencer. Há uma biblioteca JavaScript chamada KnockoutJS que, pelo que li na documentação, realiza a atualização automática da saída de uma página mediante a entrada de dados do usuário. No próprio site da lib, há um exemplo para testes e para conhecer melhor a sintaxe. Segue link:

https://knockoutjs.com/examples/helloWorld.html 1

No exemplo, há dois inputs já com valores escritos. Caso alguma alteração em qualquer das caixas de texto seja feita, a lib atualiza a saída que fica logo abaixo com as alterações assim que se muda de foco de uma caixa para outra.

Não sei se é um bug, ou estou deixando passar algo que não percebi ainda, mas há uma situação que a lib para de funcionar assim que se tentar fazer uma “trapaça”!

Se realizo alguma alteração via console do browser, além da saída não se alterar, não e possível tentar clicar na caixa de texto e alterar normalmente, pois também fica na mesma. A única maneira é recarregando a página para voltar ao normal.

Minha pergunta: É possível fazer alterações via console que provoque também a atualização da saída?

Não sei se é alguma particularidade da biblioteca ou toh fazendo alguma coisa errada. Seguem códigos que usei nas tentativas:

Tentativa#01 - Alteração direta

var box = document.getElementsByTagName("input")[0];
box.value = "Planeta";

O valor do input é alterado, mas a linha HELLO, PLANET EARTH, fica inalterada;

Tentativa#02 - Simulando foco e desfoco do input

var box = document.getElementsByTagName("input")[0];
box.focus();
box.value = "Planeta";
box.blur();

Como a atualização da saída só é feita após tirar o foco do input, tentei isso, mas sem sucesso…

Tentativa#03 - Usando JQuery

//importando lib JQuery para o console do Chrome
var jqry = document.createElement('script');
jqry.src = "https://code.jquery.com/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jqry);
jQuery.noConflict();

//selecionando input
var box = document.getElementsByTagName("input")[0];

//mudança ocorre no input, mas não é atualizado na saída
$(box).val("Planeto").change();

//tentativa que achei na net...
$(box).keyup();
$(box).val("Planeto").change();
$(box).keydown();

Como podem imaginar… também não deu certo!

Estou me esforçando nesse desafio, pois tenho um projeto que envolve uma página que utiliza essa lib (KnouckoutJS) e encontrei problemas em alterar um input e a alteração não ser reconhecida pela aplicação web.

Preciso descobrir uma maneira de inserir dados nos inputs via console para construção de um script de automação para uma página web. É possível contornar esse problema de alguma maneira? Posso forçar manualmente a lib a atualizar a saída em algum ponto do script?

Qualquer ajuda é bem-vinda!

1 Resposta 1

2

No exemplo que você passou, o Knockout irá reimprimir o valor na tela sempre que um dos campos sofrer o evento change. Desse modo, se você quiser, utilizando APIs nativas do navegador, atualizar o valor de um dos campos de forma programada, deverá disparar o evento após a mudança.

Para isso, use o método dispatchEvent:

const box = document.getElementsByTagName("input")[0];
box.value = 'Planeta (Alterado)';

box.dispatchEvent(new Event('change'));

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .