# Readonly TypedInput

**URL:** <https://discourse.nodered.org/t/readonly-typedinput/35358>\
**Category:** Developing Nodes\
**Created:** [5 November 2020 08:03 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358 "2020-11-05T08:03:12Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 November 2020 08:03 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/1 "2020-11-05T08:03:13Z")

</div>

Hi folks,

I need to display a constant value in a _ **readonly TypedInput** _ field.  
Have tried to add the `readonly` attribute to the input field in a couple of ways:

- Directly in the html input definition:

```auto
var val = $('<input type="text" class="red-ui-editor-type-json-editor-value" readonly>').css({width:w+"px"}).val(""+valValue).insertAfter(valueLabel).typedInput({
   types: types,
   default: valType
});

```

- Afterwards by [setting](https://stackoverflow.com/questions/1306708/how-to-add-a-readonly-attribute-to-an-input) it as a property:

```auto
var val = $('<input type="text" class="red-ui-editor-type-json-editor-value">').css({width:w+"px"}).val(""+valValue).insertAfter(valueLabel).typedInput({
   types: types,
   default: valType
});
val.prop("readonly",true);

```

But the TypedInput keeps being editable, and the `readonly` attribute is gone when I inspect the html in the Chrome Inspector...

When I add the `readonly` attribute manually via the Chrome Developer tools, then the TypedInput becomes readonly as expected!

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/8/e82625aafaaeee3b084bb4477bb50d72a78a96f5.png)

Does anybody know how I can solve this?

Thanks!!!  
Bart

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 November 2020 19:21 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/2 "2020-11-05T19:21:50Z")

</div>

Hi Bart, I believe this feature would need to be implemented in `typedInput.js` where the widget is created.

then when implemented, you would call something like `$("#my-typed-input").typedInput("disabled", true);` (much like we do `$("#my-typed-input").typedInput("type", "str")` and `$("#my-typed-input").typedInput("show")`)

For now, you could **hack** it with something like...

```auto
function disableTypedInput(selector, disable) {
  $(selector).siblings(".red-ui-typedInput-container").css("pointer-events", disable ? "none" : "all");
}

disableTypedInput("#my-typed-input", true);//disable
disableTypedInput("#my-typed-input", false);//enable

```

You might even be able to [extend the widget](http://github.bililite.com/extending-widgets.html) to achieve `$("#my-typed-input").typedInput("disabled", true);` but ultimately, I believe it (the functionality) needs to be implemented in the widgets src.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 November 2020 20:05 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/3 "2020-11-05T20:05:43Z")

</div>

Hey Steve,  
thanks a lot for your time!! Don't know how you figure out those hacks...

Well I'm 'trying' to find some time to implement my first pull request for the Node-RED flow editor.  
So I assume a hack of the TypedInput won't be a good strategy to get my PR ever merged 🤫

If you have an idea of how this could be implemented in the typedInput.js, then it would be appreciated if you could share it here. With a little luck, _"He Who Must Not Be Named"_ is reading this discussion and can let us know whether your proposal might be accepted...

Or was it _"He Who Must Not Be Mentioned"_? 🤣

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 November 2020 21:45 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/4 "2020-11-05T21:45:51Z")

</div>

If you were gonna do it in core, I 'd suggest adding CSS to set these based on the `disabled` attribute.

e.g...

 ![KdPSADpopD](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/21e3b2b45e82b7e89cfce63820b1b79282c4fee2.gif)

Add to `typedInput`...

```auto
        disable: function(val) {
            if(val === true) {
                this.uiSelect.attr("disabled", "disabled");
            } else if (val === false) {
                this.uiSelect.attr("disabled", null); //remove attr
            } else {
                this.uiSelect.attr("disabled", val); //user value
            }
        },
        disabled: function() {
            return this.uiSelect.attr("disabled");
        }

```

below the hide function  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/754df9569ffc1073c95a99de2a07592bc8a2b155.png)

and the scss to disable the buttons and inputs in `typedInput.scss`...

```css
    &[disabled] {
        input, button {
            background: $secondary-background-inactive;
            pointer-events: none;
            cursor: not-allowed;
        }
    }

```

at line 28...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/8/58788138d6a518f78cebfa0d447ea671863c6a80.png)

* * *

but get the OK from Nick or Dave before raising PR

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [5 November 2020 21:49 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/5 "2020-11-05T21:49:06Z")

</div>

Worth a roll of the dice.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 November 2020 23:08 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/6 "2020-11-05T23:08:47Z")

</div>

@Steve-Mcl:  
Works like a charm for my changes in the json editor:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d4986ce65d45747eaf1f209f037400ae9cc5994a.png)

@knolleary: do I need to create that PR on the _ **"dev"** _ branch. Or should I wait - it is not urgent since I can proceed now - until you have started working on Node-RED 1.3.0 in the dev branch?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 November 2020 23:10 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/7 "2020-11-05T23:10:57Z")

</div>

Forgive me asking... why do you need a typed input if the user can't change the type or edit the value ? why not just display the value ?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 November 2020 23:25 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/8 "2020-11-05T23:25:23Z")

</div>

Hey Dave,  
I'm trying to implement JSON schema support in the JSON editor, i.e. only allow input which is allowed in the specified JSON schema. Which I will use afterwards in e.g. my Onvif nodes to build automatically an Onvif manager based on the Onvif schema.

Found yesterday that a JSON schema offers a [const](https://json-schema.org/understanding-json-schema/reference/generic.html#index-3) keyword.

For example I have a webshop with a product that has a _ **constant** _ price of 99 EUR (since my sales people cannot give discount on this product). So the JSON schema will contain a `const` item:

```auto
schema = {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "$id": "http://example.com/product.schema.json",
   "title": "Product",
   "description": "A product from my little Node-RED webshop",
   "type": "object",
   "properties": {
      "productName": {
         "description": "Name of the product",
         "type": "string"
      },
      "price": {
         "description": "The price of the product",
         "type": "number",
         "const": 99
      },
}

```

I automatically generate items in the JSON editor. But as soon as I see the `const` keyword, I know that I need to show a _ **readonly** _ TypedInput number field. Because the user is not allowed to change it.

With Steve's fix this works fine: I just show the TypedInput field like normal, but this time it is disabled...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 November 2020 23:26 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/9 "2020-11-05T23:26:47Z")

</div>

So indeed like you say it is not really user input, but I simply want to show the value...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 November 2020 23:36 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/10 "2020-11-05T23:36:10Z")

</div>

Dave, in the past, when a related option was unchecked, I have resorted to hiding the related typedInput where ideally it would have disabled the input. I would like to see this capability of you guys will allow it.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [5 November 2020 23:39 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/11 "2020-11-05T23:39:45Z")

</div>

Being able to disable an input is an entirely standard and reasonable thing to be able to do. The TypedInput doesn't do it because we haven't had a need to do it and no-one has asked before.

But we really don't need to be discussing the why's of this.

@BartButenaers if there are other things like this you stumble over, then please do flag them up. And don't assume I read every post on the forum - if you want my input, mention me directly.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [6 November 2020 00:53 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/12 "2020-11-06T00:53:34Z")

</div>

Only just saw your specific question about where to target the PR.

As its 'new' functionality then please target `dev` - no need to wait for anything.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 November 2020 08:00 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/13 "2020-11-06T08:00:51Z")

</div>

Pull request [submitted](https://github.com/node-red/node-red/pull/2752).

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 November 2020 11:53 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/14 "2020-11-06T11:53:11Z")

</div>

I have created another [pull-request](https://github.com/node-red/node-red.github.io/pull/199) to add those new methods to the API documentation page. I have also tried to update other missing TypedInput features on that page, so hopefully it is now complete again ..

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 November 2020 20:23 UTC](https://discourse.nodered.org/t/readonly-typedinput/35358/15 "2020-11-22T20:23:24Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.