入力ボックスに薄いテキストを書きたい

Question

前提・実現したいこと

「数字を入力するところはここだよ」ってわかるように、数字を入力する入力ボックスに薄い字で誘導するテキストを書きたいです。

試したこと

Tkinterで、入力ボックスと同じ座標に「数字」というラベルを置きました。入力ボックス上書きしているような状態なので、入力することが出来なくなりました。

補足情報（FW/ツールのバージョンなど）

Windows10
Python3.7.1

Answer 1

元回答

おそらくイメージしてるのはいわゆるプレースホルダー（下の画像のようなもの）かと思います．

残念なんながらTKinterのEntryはデフォルトでプレースホルダーを扱えません．

英語ですが，ここ に綺麗なPlaceholderを作成できるEntryのクラスに関する記事があります．表示してる画像は記事中のコードを実行したもののスクショです．

---

#追記

元記事ではインデントの一部がタブになっていてそのまま実行できないことがありますね．
PlaceHolderの座標（右寄せ，左寄せなど）を弄りたいならば記事のクラスをさらに改変する必要がありそうです．

取り敢えず参考として上で動かしたコードだけ貼っておきます．（インデントを修正しただけ）

from tkinter import ttk


class PlaceholderEntry(ttk.Entry):
    def __init__(self, container, placeholder, *args, **kwargs):
        super().__init__(container, *args, style="Placeholder.TEntry", **kwargs)
        self.placeholder = placeholder

        self.insert("0", self.placeholder)
        self.bind("<FocusIn>", self._clear_placeholder)
        self.bind("<FocusOut>", self._add_placeholder)

    def _clear_placeholder(self, e):
        if self["style"] == "Placeholder.TEntry":
            self.delete("0", "end")
            self["style"] = "TEntry"

    def _add_placeholder(self, e):
        if not self.get():
            self.insert("0", self.placeholder)
            self["style"] = "Placeholder.TEntry"


root = tk.Tk()
style = ttk.Style(root)

style.configure("Placeholder.TEntry", foreground="#d5d5d5")

entry = PlaceholderEntry(root, "Sample placeholder")
entry.pack()

root.mainloop()

---

更に追記

なんとなくもったいない気がしたので私が手元で動かしたソース貼っておきます．
画像関係はずしてあるので戻す必要はありますが．

from tkinter import ttk
import tkinter
import random


class PlaceholderEntry(tkinter.Entry):
    def __init__(self, container, placeholder, *args, fg1="#d5d5d5", fg2="black", **kwargs):
        super().__init__(container, *args, **kwargs)
        self.placeholder = placeholder
        self.fg1 = fg1
        self.fg2 = fg2

        self.insert("0", self.placeholder)
        self.bind("<FocusIn>", self._clear_placeholder)
        self.bind("<FocusOut>", self._add_placeholder)
        self["fg"] = fg1

    def _clear_placeholder(self, e):
        if hasattr(self, "placeholder"):
            self.delete("0", "end")
            self["fg"] = self.fg2

    def _add_placeholder(self, e):
        if not self.get():
            self.insert("0", self.placeholder)
            self["fg"] = self.fg2


# 数字をランダム出力
D = random.randint(0, 5)
# ウィンドウ作成
root = tkinter.Tk()
root.title("運勢占い")
root.minsize(640, 480)
root.option_add("*font", ["ＭＳ Pゴシック", 22])
# 画像読み込み
# getu = tkinter.PhotoImage(file="大吉.png")
# ka = tkinter.PhotoImage(file="凶.png")
# sui = tkinter.PhotoImage(file="吉.png")
# moku = tkinter.PhotoImage(file="小吉.png")
# #画像表示
# canvas = tkinter.Canvas(bg="plum", width=640, height=480)
# canvas.place(x=0, y=0)
# img = tkinter.PhotoImage(file="神社.png")
# canvas.create_image(320, 240, image=img)
# ラベル01
question = tkinter.Label(text="あなたが入力した数字で今日の運勢を調べます。\n　0から10の数字を↓に入力してください。", bg="plum")
question.place(x=27, y=20)
# ラベル02
entry = PlaceholderEntry(root, "0", width=2, bd=4, bg="pink")
entry.place(x=300, y=140)
#ラベル03
button = tkinter.Button(text="決定ボタン",bg="peachpuff")
button.place(x=240, y=400)
#おみくじ始まり
def btn_click():
    a = float(entry.get())
    if a > 10:
        again_text = tkinter.Label(text="０から１０の数字を入力してください。",fg="red",bg="plum")
        again_text.place(x=105,y=20)
        question.destroy()
        return
    if a < 0:
        again_text = tkinter.Label(text="０から１０の数字を入力してください。",fg="red",bg="plum")
        again_text.place(x=105,y=20)
        question.destroy()
        return
    if a+D == 8 or a+D == 9:
        again_text = tkinter.Label(text="　　　　　　　　　　　　　　　　　　　　　　　       ",fg="red",bg="plum")
        again_text.place(x=100,y=20)
        res_text = tkinter.Label(text="あなたの今日の運勢は大吉です。",fg="red", bg="plum")
        res_text.place(x=115, y=20)
        res_text = tkinter.Label(text="やったね！", bg="plum")
        res_text.place(x=250, y=425)
        canvas.delete("all")
        question.destroy()
        entry.destroy()
        button.destroy()
        canvas.create_image(320, 240, image=getu)
    if 10 <= a+D <= 15:
        again_text = tkinter.Label(text="　　　　　　　　　　　　　　　　　　　　　　　　　　　",fg="red",bg="plum")
        again_text.place(x=100,y=20)
        res_text = tkinter.Label(text="あなたの今日の運勢は凶です。",fg="darkviolet",bg="plum")
        res_text.place(x=120, y=20)
        res_text = tkinter.Label(text="ざんねーん", bg="plum")
        res_text.place(x=250, y=425)
        canvas.delete("all")
        question.destroy()
        entry.destroy()
        button.destroy()
        canvas.create_image(320, 240, image=ka)
    if 4 <= a+D <= 7:
        again_text = tkinter.Label(text="　　　　　　　　　　　　　　　　　　　　　　　　　　　",fg="red",bg="plum")
        again_text.place(x=100,y=20)
        res_text = tkinter.Label(text="あなたの今日の運勢は吉です。",fg="green",bg="plum")
        res_text.place(x=120, y=24)
        res_text = tkinter.Label(text="おっええやん", bg="plum")
        res_text.place(x=240, y=430)
        canvas.delete("all")
        question.destroy()
        entry.destroy()
        button.destroy()
        canvas.create_image(320, 245, image=sui)
    if 0 <= a+D <= 3:
        again_text = tkinter.Label(text="　　　　　　　　　　　　　　　　　　　　　　　 　　      ",fg="red",bg="plum")
        again_text.place(x=100,y=20)
        res_text = tkinter.Label(text="あなたの今日の運勢は小吉です。",fg="sienna",bg="plum")
        res_text.place(x=120, y=20)
        res_text = tkinter.Label(text="いいじゃん！", bg="plum")
        res_text.place(x=243, y=425)
        canvas.delete("all")
        question.destroy()
        entry.destroy()
        button.destroy()
        canvas.create_image(320, 240, image=moku)
button["command"] = btn_click

root.mainloop()

Comments

[power-chan]

そうなんですね！記事も張ってもらえて嬉しいです＾＾
頑張ってみます！

[ebal]

こういう，普段目にするけど名前は知らない機能は名前に関する知識がないと検索できなくて困りますよね．うまくいくことを祈っています．

[power-chan]

プレースホルダの座標はどうやって変えるんですかね...
この記事に乗ってるコードをコピペしたらインデントが間違ってるらしく実行できなかったです。(泣)
プレースホルダという言葉を知ったので他にも調べてみましたがどれも英語で不自然で分かりにくかったです。もーうどうしましょう！笑

[ebal]

取り敢えず回答に動いたコード追記しました

[power-chan]

ebalさんの追記したコードのfrom tkinter import ttkの下にimport tkinterを追加、root = tk.Tk()をroot = tkinter.Tk()に変更したらうまく実行できました！このプログラムを入力ボックスに連結するのは難しそうです笑できるのかなー　僕が書いたコード全てを追記しました！良かったら実行して現状を確認してみてください！！

[ebal]

実行してほしい！とのことならせめてインデントを整えてください……
これを復元するのはかなりの手間ですし正しさを保証できないので．
また，質問文中全てですがコードはMarkdownの機能を用いると追記の用に表示されるので見やすく，コピーしやすくなるのでベターです．

[power-chan]

本当にすみませんでした。これでできてますか...？何卒宜しくお願い致します。

[ebal]

これで動くもの提示してしまうとこのサイトの理念に反するか……？とか思いつつ，動くものはできました．
PlaceholderEntryの定義を少しかえて基底クラスをttk.Entryからtkinter.Entryにし，それに合わせて見た目変更の方法を変えたうえでラベル2（entry）のクラスをPlaceholderEntryに変えればいけますね．

[power-chan]

ご返信ありがとうございました。本当に申し訳ないですが、このオブジェクトを入力ボックスに連結させる僕の技術力が無いということと、入力ボックスにおいても見た目が悪くなりそうと思ったので、この案はやめようかなと思います。たくさんの時間と労力をこんな僕にかけて頂き、ありがとうございました。。