HTML - is it possible to determine the content of an input?

Question

Briefly: I would like to determine the content of an input in a form, but I do not know or find an attribute that does, for example. It is possible?

Thank you in advance.

Answer 1

If you want to set a default value for the input: yes, it is possible.

You can use, as @Maycon said, the attribute value, not only for input textas well as for Submit inputs, radio inputs, among others.

And if you need, here at MDN you can find the list of possible attributes of <input>, each with its own specifications.

I hope I’ve helped!

Answer 2

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

Even in inputs like:

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

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

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

Checking the shape of the value=""

You can check in various ways the value format of an input, would be each onblur and using a regex check:

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

So in the case of the file we can read the content and "TRY" identify the content, being able to do this in the back end (after the upload), or in the front end using the File API that is native in the browsers:

• https://www.w3.org/TR/FileAPI/

A simple way to check input data would be for each execution of the change event in the specific field, as an example I used in this answer:

• /a/117499/3635

Thus:

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 content, now the most complicated part is to determine the type of the content, understand that files can be binary or text files, so they are not files although they have extensions like . exe, . bat, . html, does not indicate that these are really what they say so the mime-type check exists, as in Unix-like systems that use "MAGIC", but this is not the case for front-end, despite the own .files be able to 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">

However if the file is a JPEG image validates, but has the name image.FOOBAR instead of image.JPG, The type will be returned as empty, so it is not a reliable solution, Liais if you select one. txt and rename to image.jpg it will state that it is image/jpeg even though it’s not.

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

• https://en.wikipedia.org/wiki/Magic_number_%28programming%29

From the content read (soon I will try to formulate an example for the main file types), but I need to be sure if this is what you want, I recommend you edit the question because at the moment I do not know your real need.