Disable all inputs of a form using only css?

Question

Disable all inputs of a form using only css?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

2

Problem

I'm implementing some controls in a prototype, and I'm creating an overlay panel to represent background processing, loading asserts from server, fetching data on server, anyway to represent that the system is working and the user must wait.

For this I am creating a div on every application, with a z-index greater than the content that I want to leave immutable for the client, while waiting for the process. But I've noticed that even with div on content you can access it through tab , as you can see here in the example .

So I would like some way to disable the inputs or avoid access to it through tab , but this using just css (javascript is not viable), something like this:

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 a way to css disable a input html?

css css3

asked by anonymous 27.08.2014 / 18:30

3 answers

Fatal error while using isset Error in an sql in laravel

score 2 · Answer 1

It is not possible to block access to inputs with CSS only.

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

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 will still end up selecting the "disabled" field, which could cause confusion. This is not a problem, but I still have the problem that the field still accepts values, that is, if I press tab and start writing it, even without displaying it, I would still accept what I wrote.

score 1 · Answer 2

Only one point to add to the above comments is that if the user has any debugger, he can re-enable the form fields .... at least enough to edit the content .. and so maybe send the form ..

One possible solution would be to modify the imput="text" by a label with the information, but I think this would have to be very tricky

Without counting the various browsers where each one accepts a limited amount of attributes that in turn is different from the others .... then the thing starts to blur to the side of the programmer

You do not work very hard with the hypothesis that the user has enough knowledge to know about this paranaue of HTML/JS/CSS .. so what we can do is disguise even ...

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

Test this to block the tab:

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

and puts this in form :

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

The first field of the form I put id 'aa' to receive the focus, it is as if he understood that the tab returned to index 0, and every time he types tab, he adds 1 to the index, and removes 1 of the index.

Then when the form is blocked you remove the event event from the form, when the form is unlocked, add the event event.

Anyway, it's a great gambiarra, but it's the best solution I've found rs

score 0 · Answer 3

I have developed a solution (type == POG ), which solved my particular problem, and will only work if it is used with a% overlay on the content which does not allow direct manipulation of the user with the form, my solution avoids the entry of div in focus children of a form with inputs . Aside from the focus, I'm also manipulating the events of class = disabled and trying to cancel them. Here's 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, but it's the solution to my particular problem, and I'm still waiting for a more efficient solution.