[GH-ISSUE #321] Colorized input field #245

New issue

Closed

opened 2026-03-04 01:03:18 +03:00 by kerem · 3 comments

kerem commented

2026-03-04 01:03:18 +03:00

Owner

Originally created by @antonmedv on GitHub (Jul 4, 2019).
Original GitHub issue: https://github.com/rivo/tview/issues/321

Hi,

How to colorize user’s input while user typing in input field?

Thanks for awesome library. I think it’s really gold :)

Originally created by @antonmedv on GitHub (Jul 4, 2019). Original GitHub issue: https://github.com/rivo/tview/issues/321 Hi, How to colorize user’s input while user typing in input field? Thanks for awesome library. I think it’s really gold :)

kerem closed this issue

2026-03-04 01:03:19 +03:00

kerem commented

2026-03-04 01:03:19 +03:00

Author

Owner

@rivo commented on GitHub (Jul 10, 2019):

Yeah, I don't think this is possible at the moment and it would be quite difficult to implement, I think. (Is this even possible in HTML's <input> tag? I've never seen anything like this.)

@rivo commented on GitHub (Jul 10, 2019): Yeah, I don't think this is possible at the moment and it would be quite difficult to implement, I think. (Is this even possible in HTML's `<input>` tag? I've never seen anything like this.)

kerem commented

2026-03-04 01:03:19 +03:00

Author

Owner

@antonmedv commented on GitHub (Jul 10, 2019):

This is kinda possible in html in ace or codemirror editor. Also for example in micro terminal editor it's possible to type code with highlighting. I was wondering if it possible in tview as well. I'd like to implement terminal calculator where input is colorized as users types and expression. For example, 1+2 there are 1 and 2 have a blue colour.

@antonmedv commented on GitHub (Jul 10, 2019): This is kinda possible in html in ace or codemirror editor. Also for example in micro terminal editor it's possible to type code with highlighting. I was wondering if it possible in tview as well. I'd like to implement terminal calculator where input is colorized as users types and expression. For example, `1+2` there are 1 and 2 have a blue colour.

kerem commented

2026-03-04 01:03:19 +03:00

Author

Owner

@rivo commented on GitHub (Jul 10, 2019):

I'm sure in HTML, one could imitate an input field by handling keyboard/mouse input and outputting a whole bunch of tags which make it look like the input field can display colourized text. But I don't know of a way to make the native <input> tag do the same. To my knowledge, it simply displays the value attribute which cannot contain any HTML tags itself.

Correspondingly, you can make a more complex input field yourself. Check out this Wiki page for pointers. You could use Application.SetAfterDrawFunc() to "post-process" screen output, i.e. colourize your numbers. To find out where the numbers are located on screen, you could use InputField.SetDrawFunc(). It's not exactly pretty but I think you could make it work that way.

Let me know if this helps.

@rivo commented on GitHub (Jul 10, 2019): I'm sure in HTML, one could imitate an input field by handling keyboard/mouse input and outputting a whole bunch of tags which make it look like the input field can display colourized text. But I don't know of a way to make the native `<input>` tag do the same. To my knowledge, it simply displays the `value` attribute which cannot contain any HTML tags itself. Correspondingly, you can make a more complex input field yourself. Check out [this Wiki page](https://github.com/rivo/tview/wiki/Primitives) for pointers. You could use [`Application.SetAfterDrawFunc()`](https://godoc.org/github.com/rivo/tview#Application.SetAfterDrawFunc) to "post-process" screen output, i.e. colourize your numbers. To find out where the numbers are located on screen, you could use [`InputField.SetDrawFunc()`](https://godoc.org/github.com/rivo/tview#Box.SetDrawFunc). It's not exactly pretty but I think you could make it work that way. Let me know if this helps.