HTML - can you determine the content of an input? [closed]

Any value in inputs will always be text / string (except in type=file )

Even in inputs such as:

• <input type="number">
• <input type="tel">

Whether you write a number or not in the value, for transport via HTTP this will always be treated as text and for interaction with the javascript will always be strings p>

The only exception, as I already mentioned, is <input type="file"> type, which only serves the end user to input some file (ie you have no control over insert values in it), and can be any type of file besides text.

Checking the format of value=""

You can check in several ways the value format of an input, it would be every onblur and using a check 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">

Checking the contents of a file

Then in the case of the file we can read the content and "TRY" to identify the content, either in the backend (after upload) or in the front end using the File API that is native to browsers: / p>

• link

A simple way to check the input data would be with each change event execution in the special field, as an example I used in this response:

• link

So:

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>

Of course, with this we only read the contents, now the most complicated part is to determine the type of content, understand that files can be binary or text files, thus not files despite having extensions such as .exe, .bat, .html, does not indicate that these are really what they say for this is the mime-type check, as in unix-like systems that use "MAGIC", but this is not the case for front-end, despite its own .files can provide something like:

 files[i].type

Example:

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">

So the solution is to read the content and try to check for the content type, which is not very simple, what you could do is check the magic-number:

• link

Of the content read (I'll try to give an example for the main file types soon), but I need to be sure if this is what I want, I recommend that you edit the question because at the moment I do not know what your real need is. p>