protect text input fields from being editeded


Is there a way to protect a text input field from being edited - almost like a read only view?

I have a project where I want different users to access the same project at different where a user can edit text input fields and the other where a user can view what a person has typed but not edit...

One option is to cover the input text fields to stop a user interacting..but the poblem is one of the text fields automatically always takes the focus. I can remove tabbing but one of the input text fields always remains editable. I have been able to have another field off slide take the focus and with no tabbing it's a workaround. However, this means there can be no tabbing allowed.

Can anyone think of any other solution?



15 Replies
Lauren Connelly

Hi Chris!

Another thought would be to add variables to change the state of the text entry fields to disabled when they're not equal to (blank).

We might be able to give you customized workarounds if we can take a look at your file. Would you mind either attaching it to this discussion or upload it privately using this link?

Matthew Bibby
Chris Pim

I have a project where I want different users to access the same project at different where a user can edit text input fields and the other where a user can view what a person has typed but not edit...


Can you please explain more about how this will work? Are the two people sharing the same account? Does the second person need to view the info in the actual course? Or would exporting their answers help?

Chris Pim

Two different people will be accessing the same 'account'

The content is being read in from a database via variables in Storyline...some of that content is related to input textfields - the content will either be blank by default or contain text edited by one user...What I want is a way for a second user to review that typed content but not be able to edit the second user is effectively going into the first user's account.


Matthew Bibby

It should be possible to disable inputs using JavaScript, however, triggering this JavaScript at the right time may be problematic.

How will the course know that the person viewing the text entry is the second user or not?

The only way I can think of doing it is having a submit button (which disables the text entry fields) but this would prevent people from being able to change their responses after they have pressed submit.

Chris Pim

Hi Matt,

Thanks for your help with this...

The course would receive a boolean to say whether it is the user who can or cannot text edit...

I'd appreciate any help you could give on using javascript to do this...would javascript run on every slide, every input box or something more global...if you have the inclination I would appreciate some possible help. You have helped me a  number of times before btw!



Matthew Bibby

Alright mate, here you go.

This JavaScript should disable all text inputs when it runs:

var els = document.getElementsByTagName('input');
for (var i = 0; i < els.length; i++) {
els[i].setAttribute("disabled", "true");

Typically I'd add this to the master slide so it runs on timeline start. In your case, you'll need to add some additional logic to ensure this runs when you want it to.

Hope that helps.

Chris Pim

Hi Matthew,

Thanks for helping me with this.

Not sure if I am doing this right but I tried adding a trigger both on the slide and on the master (this is the version I am sending) just....  'Execute Javascript when the timeline starts'...I copied exactly your javascript into the Javascript pane.

I notice when compiled that the first text box receives the focus and I can type into it and tab to the others and also type in them.

I also have layers with textboxes in them and I'm not sure, if the Javascript does work, if it would apply to textboxes in layers?

Anyway I cant get this working initially? Any thoughts?

Matthew Bibby

Hi Chris,

Here is a demo.

Here is the source file.

It looks like the JS I provided above only works on inputs that are loaded at the time.

So, if you press the disable inputs button, it'll disable those on screen. But when you open the layer, those inputs will not be disabled. The code will need to run again. 

Chris Pim

Hi Matt

This works beautifully. It even works when the javascript runs on slide startup. Perfect. Yet it isn't working for my projects. I spent several hours trying to understand why...I thought it was to do with the input text field being within a scrollbar. Finally I worked out it seems to be because the javascript code does not work when the text field accepts more than one line of text...? See attached...

The problem is I need the editior and viewer to be able to browse whatever amount of text there is in the I have to extend the input textbox to allow multiple lines of text that can then be browsed using the scrollbar...I find an input text box containing a varaible that could read in any amout of text a real mess but it just about works for my project...

In short is there a way to get the code working for input fields beyond one line of text?

Chris Pim

Hi Matt,

FYI. Someone else has also helped me and this code appears to work:

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
inputs[i].setAttribute("disabled", "true");


var textareas = document.getElementsByTagName('textarea');
for (var i = 0; i < textareas.length; i++) {
textareas[i].setAttribute("disabled", "true");