1

I was wondering how I would add some sort of background text in the input box defined in the code attached here under:

The box could say "Example: Joe Bloggs" but greyed out and then remove when the user clicks inside the box? Hope this isn't too tricky.

        # ************ Retrieve user's Full name ************
    tk.Label(self, text='First and last name:').grid(sticky='e') # Label

    self.full_name_entry = tk.Entry(self, bg='white', width=30) # Entry box
    self.full_name_entry.grid(row=1, column=1, pady=15, columnspan=2) # Entry box placement
Reblochon Masque
  • 35,405
  • 10
  • 55
  • 80
Simon Betty
  • 35
  • 2
  • 4
  • Welcome to Stack Overflow. I've edited out the extra pleas that you are new. You are right to be considering the HTML 5 Placeholder attribute for your input box. – Dragonthoughts Aug 10 '18 at 07:59

1 Answers1

12

You need to:

  • use tk.Entry.insert to add the default text to an Entry widget
  • set the foreground color to 'grey'
  • upon the entry getting focus, the default is deleted, and the foreground set to 'black'.
  • you type in the text.
  • upon pressing return, the value of the entry is extracted, then the entry is reset with the default text in grey.
  • exiting the focus also resets the entry to default grey (you may want to choose avoid this as a partial entry will then be deleted if you make the entry lose focus; by clicking outside the box, for instance)

Here is what the code look like

import tkinter as tk

def handle_focus_in(_):
    full_name_entry.delete(0, tk.END)
    full_name_entry.config(fg='black')

def handle_focus_out(_):
    full_name_entry.delete(0, tk.END)
    full_name_entry.config(fg='grey')
    full_name_entry.insert(0, "Example: Joe Bloggs")

def handle_enter(txt):
    print(full_name_entry.get())
    handle_focus_out('dummy')

root = tk.Tk()

label = tk.Label(root, text='First and last name:')
label.grid(sticky='e')

full_name_entry = tk.Entry(root, bg='white', width=30, fg='grey')
full_name_entry.grid(row=1, column=1, pady=15, columnspan=2)

full_name_entry.insert(0, "Example: Joe Bloggs")

full_name_entry.bind("<FocusIn>", handle_focus_in)
full_name_entry.bind("<FocusOut>", handle_focus_out)
full_name_entry.bind("<Return>", handle_enter)


root.mainloop()

Here is what it looks upon opening the window:

enter image description here

Upon giving focus to the Entry widget, the example text is deleted, and the font color changed to black; after filling the entry, the aspect is:

enter image description here

Reblochon Masque
  • 35,405
  • 10
  • 55
  • 80
  • Instead of doing `handle_focus_out('dummy')`, you can manually remove focus from the Entry widget using `root.focus()`. The advantage of this is that the focus is actually lost (if you type after pressing Enter it doesn't come in the Entry) and the FocusOut event is triggered automatically. Also, in the `handle_focus_out()` I would only revert to the placeholder if the widget is empty, and empty the widget in the `handle_enter()` function. This doesn't make too much of a difference now there's only one Entry, but it will when there's more. – fhdrsdg Aug 10 '18 at 09:13
  • Agreed @fhdrsdg. I'll leave the OP decide the precise behavior he wants; at this moment, it is underdefined and charging ahead probably vain. – Reblochon Masque Aug 10 '18 at 09:18
  • True, true. Your answer already is already quite extensive considering how broad the question is. – fhdrsdg Aug 10 '18 at 09:23
  • We have progress!! Thanks for that. I just can't figure out where to put the definitions? I have the example text and it shows in grey, when clicked it stays and stays in grey but no matter where I add the definitions it errors out? – Simon Betty Aug 10 '18 at 09:30
  • What definitions? – Reblochon Masque Aug 10 '18 at 09:32
  • When I add in `def handle_focus_in(_): full_name_entry.delete(0, tk.END) full_name_entry.config(fg='black') def handle_focus_out(_): full_name_entry.delete(0, tk.END) full_name_entry.config(fg='grey') full_name_entry.insert(0, "Example: Joe Bloggs") def handle_enter(txt): print(full_name_entry.get()) handle_focus_out('dummy')` I get `/inventory_collector2.py", line 233 def handle_focus_in(_): ^ IndentationError: unexpected indent` – Simon Betty Aug 10 '18 at 09:35
  • That is a problem with your copy paste in your own code, there is not much I can do to help you. The code as I posted it has no indentation errors, and runs correctly as is. – Reblochon Masque Aug 10 '18 at 09:38
  • Figured that out after I posted! I got a bit further, I removed the indentations and doesn't error out now until I add in `full_name_entry.bind("", handle_focus_in) full_name_entry.bind("", handle_focus_out) full_name_entry.bind("", handle_enter)` It's as if I need to un-indent all my previous code but it has worked fine previously? I know this is a big ask and again my apologies for my newbie-ness. I have stuck my full code on Git if you could take a look? https://gist.github.com/betty02 – Simon Betty Aug 10 '18 at 09:49
  • The github link is empty – Reblochon Masque Aug 10 '18 at 10:12
  • Really :/ Hows about this https://gist.github.com/betty02/72735af7cc75f7aedc20b69bfaa49694 – Simon Betty Aug 10 '18 at 10:34
  • Sorry to be cheeky @ReblochonMasque - Don't suppose you managed to take a look for me did you? Still can't get it working – Simon Betty Aug 14 '18 at 08:24
  • I am glad I could help, If you feel that my answer helped you, you could consider [what to do when someone answers my question](https://stackoverflow.com/help/someone-answers), and [how to accept my answer](http://meta.stackexchange.com/a/5235) – Reblochon Masque Aug 14 '18 at 08:35
  • I looked at your gist, that's 260 lines of GUI code calling subprocess, appkit, base64 and a fistfull of other modules... Surely this is not related to the question about greying out a tk.Entry box that I answered. Ask a new question, with an MVCE if you like, and I'll take a look if I see it. – Reblochon Masque Aug 14 '18 at 08:36