Disable all inputs from a form using css only?

Question

Problem

I’m implemented some controls in a prototype, and I’m creating a dashboard overlay to represent background processing, loading asserts server, search data on the server, finally to represent that the system is working and the user should wait.

For that I am creating a div on every application, with a z-index greater than the content I wish to leave unchanged for the client while he awaits the process. But I found that even with the div about the content is possible to access it through tab, as you can see here in the example.

So I would like to somehow disable the inputs or avoid access to it through tab, but this using only css (javascript is not feasible), something in this sense:

form.disabled input {
    /*  o que procuro é algo assim: */
    disabled: disabled; /* isso não funciona e nem existe no css, é só para exemplificar o que pretendo */
    /* como desabilitar todos os inputs deste form com css, sem usar javascript? */
    /* ou no minimo como não permitir da o foco no inputs quando o form estiver desabilitado */
}

Question?

Is there any way css to disable a input html?

Answer 1

Unable to block access to inputs with CSS only.

What you can do is simulate this lock, so that the user understands that the input should not be used, example:

form.disabled input{
    pointer-events:none;
    outline:none;
    text-indent:-9999px;
}

Example: FIDDLE

The problem with this "simulation" is that by pressing tab the user still ends up selecting the field "disabled", which could cause confusion. Otherwise there is still the problem of the field still accepting values, IE, if I press tab and start writing on it, even without showing it would still accept what I write.

Answer 2

The only point to add to the comments above is that if the user has any debugger, he can rehabilitate the form fields.... at least enough to edit the content.. and so maybe submit the form..

A possible solution would be to modify the imput="text" by a label with the information, but I think it would have to be quite cunning

Not counting the various browsers where each one accepts a limited amount of attributes that in turn is different from the other.... then it starts to blur the programmer’s side

It means that one does not work much with the hypothesis that the user has enough knowledge to know about these HTML/JS/CSS.. then what we can do is disguise ourselves...

-----EDIT--------

test this to block the tab:

function teste(evt){
    tecla = evt.keyCode;
    if (tecla==9) {$("#aa").focus();}
}

and puts that in the form:

<form id="esse" onkeypress="teste(event)">

the first field of the form I put the id 'aa' to receive the Focus, then it is as if he understood that the tab went back to Dice 0, and every time he type tab, he adds 1 to the Dice, and removes 1 from the Dice.

Ai when the form is locked Oce removes the test event(Event) from the form, when the form is unlocked, adds the test event(Event).

Anyway, it is a great gambiarra, but it is the best solution I found rs

Answer 3

I developed a solution (type == POG), which solved my particular problem, and will only work if used with a div overlay on content that does not allow direct user handling with the form, my solution avoids the input of the focus in the inputs children of a form with the class = disabled. Besides Focus, I’m also manipulating the events of mousedown click change and trying to cancel them. Follow my solution:

$('body').on('focus mousedown click change', 'form.disabled input', function(e){
    // cancel stack events
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    // remove focus
    $(this).blur();

    return false;
});

Unfortunately I had to use javascript.

Follow the online example of my solution.

Note: This is not a definitive solution, nor close to it, is the solution to my particular problem, and I keep waiting for a more efficient solution.