Resumidamente: gostaria de determinar o conteúdo de um input num formulário, mas não conheço nem encontrei um atributo que o faça, por exemplo. É possível?
Agradeço desde já.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeResumidamente: gostaria de determinar o conteúdo de um input num formulário, mas não conheço nem encontrei um atributo que o faça, por exemplo. É possível?
Agradeço desde já.
Se você quer estabelecer um valor predefinido para o input: sim, é possível.
Você pode usar, como o @Maycon já falou, o atributo value
, não só para input texts, como também para input submits, input radios, entre outros.
E, se precisar, aqui no MDN você pode achar a lista de atributos possíveis do <input>
, cada um com suas especificações.
Espero ter ajudado!
Qualquer valor em inputs serão sempre texto/string (exceto no type=file
)
Mesmo em inputs como:
<input type="number">
<input type="tel">
Independe de você escrever um numero ou não no valor, para o transporte via HTTP isto sempre será tratado como texto e para interação com o javascript serão strings sempre
A unica exceção, como já citei, é o tipo <input type="file">
, que só serve para o usuário final inputar algum arquivo (ou seja, você não tem controle sobre inserir valores nele), podendo ser qualquer tipo de arquivo além de texto.
value=""
Você pode checar de várias formas o formato do value de um input, seria a cada onblur
e usando uma checagem via regex:
var response = document.getElementById("response");
document.getElementById("test").onblur = function() {
var valor = this.value;
if (/\D/.test(valor)) {
console.log('Seu campo contém valores NÃO numéricos');
} else {
console.log('Numero:' + valor);
}
};
<input type="text" id="test">
Então no caso do file podemos sim ler o conteúdo e "TENTAR" identificar o conteúdo, podendo fazer isso no back-end (após o upload), ou no front-end usando a API File que é nativa nos navegadores:
Uma maneira simples de checar os dados do input seria a cada execução do evento change no campo espeficido, como exemplo que usei nesta resposta:
Assim:
function LerArquivo(file, done, fail) {
var reader = new FileReader;
reader.onload = function(evt) {
done(evt.target.result);
};
reader.onerror = function(evt) {
fail();
};
reader.readAsText(file);
}
var response = document.getElementById("response");
document.getElementById("test").onchange = function() {
if (this.files.length == 1) {
LerArquivo(this.files[0], function(resposta) {
response.value = resposta;
}, function() {
response.value = "Falha ao ler o arquivo";
});
}
};
<input type="file" id="test">
<textarea style="width:100%; height: 400px;" id="response"></textarea>
Claro que com isto apenas lemos o conteudo, agora a parte mais complicada é determinar o tipo do conteudo, entenda que arquivos podem ser arquivos binários ou de texto, sendo assim não arquivos apesar de terem extensões como .exe, .bat, .html, não indica que estes sejam realmente o que dizem por isto a existe a checagem do mime-type, como em sistemas unix-like que usam o "MAGIC", mas isto não é o caso para front-end, apesar do proprio .files
poder fornecer algo como:
files[i].type
Exemplo:
var response = document.getElementById("response");
document.getElementById("test").onchange = function() {
if (this.files.length == 1) {
console.log("tipo: ", this.files[0].type);
}
};
<input type="file" id="test">
No entanto se o arquivo for uma imagem JPEG valida, mas tiver o nome image.FOOBAR
ao invés de image.JPG
, o tipo será retornado como vazio, portanto não é uma solução confiável, aliais se você selecionar um .txt e renomear para imagem.jpg ele vai afirmar que é image/jpeg
mesmo não sendo.
Então a solução é ler o conteudo e tentar checar pelo tipo de conteudo, o que não é muito simples, oque você poderia fazer é checar o magic-number:
Do conteudo lido (em breve vou tentar formular um exemplo para os principais tipos de arquivo), mas preciso ter a certeza se é isto que deseja, recomendo que edite a pergunta porque no momento não sei qual sua real necessidade.