Question

Prevent user from selecting a field/input box

Forms Version 10

Updated March 9, 2021

asked on March 8, 2021

I have 3 fields on a form that I autofill using a lookup. There is no need for a user to click on them, tab to them, etc., and I want to prevent the selection of the field by mouse or when tabbing through the form. I found some JavaScript, but it does not work. Does anyone know what I can do to prevent a user from selecting the fields? Thank you.

Here is what I put in the JavaScript section of my form, FYI:

$('#q10 input').click(function () {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
})

$('#q10 input').focus(function () {
        return this
                 .attr('unselectable', 'on')
                 .css('user-select', 'none')
                 .on('selectstart', false);
})

$('#q10').attr('unselectable', 'on');
$('#q10').css('user-select', 'none');
$('#q10').on('selectstart', false);

0 0

Answer

SELECTED ANSWER

replied on March 9, 2021

You can remove the yellow highlighting of the selected field with CSS like this:

#q10.form-focused {background-color : transparent!important;}

The yellow highlighting is caused by the class form-focused. This overrides that coloring but only on field #q10. The !important tag tells it to override the CSS rule set elsewhere by the program.

0 0

Replies

replied on March 8, 2021 • Show version history

I tried to do some testing with it and got some errors (check your browser console). It doesn't like the "return this" lines.

Here's how I usually do this kind of stuff:

$(document).ready(function () {
  
  $('#q10 input').attr('disabled','true');
  
});

Does that work for your purposes? That disables the field when the form loads.

Based on your other code, if you wanted to disable it when it is clicked or received focus, you could do this:

$(document).ready(function () {
  
  $('#q10 input').click(function() {
    $(this).attr('disabled','true');
  });
  
  $('#q10 input').focus(function() {
    $(this).attr('disabled','true');
  });
  
});

0 0

View 1 previous reply

replied on March 9, 2021

Thank you. That worked, mostly. Tabbing skips the fields, and clicking on them highlights the entire line and doesn't allow selecting the input box. I'd prefer to have it so clicks on the input or label (anywhere on the line) would be completely ignored, but this solution will suffice unless/until I can find a way to completely disregard mouse clicks.

Thanks again.

0 0

SELECTED ANSWER

replied on March 9, 2021

You can remove the yellow highlighting of the selected field with CSS like this:

#q10.form-focused {background-color : transparent!important;}

The yellow highlighting is caused by the class form-focused. This overrides that coloring but only on field #q10. The !important tag tells it to override the CSS rule set elsewhere by the program.

0 0

replied on March 9, 2021

Thank you! This works perfectly now. Below is what I ended up with, for others who may need it. I appreciate the assistance.

In my CSS:

#q10.form-focused {background-color : transparent!important;}
#q20.form-focused {background-color : transparent!important;}
#q21.form-focused {background-color : transparent!important;}

In my Javascript:

$(document).ready(function () {

  $('#q10 input').attr('disabled','true');
  $('#q20 input').attr('disabled','true');
  $('#q21 input').attr('disabled','true');
 
});

1 0

replied on March 9, 2021

Very nice! Glad to hear it is working for your needs.

1 0

You are not allowed to follow up in this post.

Question

Question

Prevent user from selecting a field/input box

Answer

Replies

Sign in to reply to this post.