Making an Input Box in Pygame

Question

I have just started with pygame and I wanna make two working input boxes, were you can write, delete, send (with the send key) and edit (just by re-clicking the input box).

P.S. Please don't make very complicate code introducing many methods and more... just be simple please. :)

Do you know how to export the python file into an android/ios/windows app without glitching the content?

This is the python code that I've made:

class inputBox1:
    input = pygame.surface.Surface((160, 20))
    inputPos = input.get_rect()
    input.fill(black)
    inputPos.centerx = loveTestPageText.textPos.centerx
    inputPos.centery = loveTestPageText.textPos.centery + 26
    active = False
    background.blit(input, inputPos)
class textInputBox1:
    font = pygame.font.Font(None, 26)
    text = font.render("Nome del primo", 1, white)
    textPos = text.get_rect()
    textPos.centerx = inputBox1.inputPos.centerx
    textPos.centery = inputBox1.inputPos.centery
    background.blit(text, textPos)
class inputBox2:
    input = pygame.surface.Surface((160, 20))
    inputPos = input.get_rect()
    input.fill(black)
    inputPos.centerx = inputBox1.inputPos.centerx
    inputPos.centery = inputBox1.inputPos.centery + 26
    active = False
    background.blit(input, inputPos)
class textInputBox2:
    font = pygame.font.Font(None, 26)
    text = font.render("Nome del secondo", 1, white)
    textPos = text.get_rect()
    textPos.centerx = inputBox2.inputPos.centerx
    textPos.centery = inputBox2.inputPos.centery
    background.blit(text, textPos)
    
for event in pygame.event.get():
    if event.type == pygame.QUIT:
        pygame.quit()
    if event.type == pygame.MOUSEBUTTONDOWN:
        pos = pygame.mouse.get_pos()
        if inputBox1.inputPos.collidepoint(pos):
            print("Clicked on 1st Input Box")
            inputBox1.active = True
            textInputBox1.text = textInputBox1.font.render(" ", 1, white)
        if inputBox2.inputPos.collidepoint(pos):
            print("Clicked on 2nd Input Box")
            inputBox2.active = True
            textInputBox2.text = textInputBox2.font.render(" ", 1, white)
    #if event.type == pygame.KEYDOWN and inputBox1.active == True:
        # how can i can write into the box?
        # same for the 2nd box

And this is how it appears: https://i.sstatic.net/oTjyce1A.png

P.S. Please don't make very complicate code introducing many methods and more... just be simple please. :)

Answer 1

Here's a text input box class:

class InputBox:
    def __init__(self, x, y, width, height, text=''):
        self.rect = pygame.Rect(x, y, width, height)
        self.color = WHITE
        self.text = text
        self.font = pygame.font.Font(None, 32)
        self.active = False

    def handle_event(self, event):
        if event.type == pygame.MOUSEBUTTONDOWN:
            # If the user clicked on the input_box rect.
            if self.rect.collidepoint(event.pos):
                # Toggle the active variable.
                self.active = not self.active
            else:
                self.active = False
            # Change the color of the input box when selected
            self.color = WHITE if self.active else BLACK
        if event.type == pygame.KEYDOWN:
            if self.active:
                if event.key == pygame.K_RETURN:
                    onenter(self.text)
                    self.text = ''
                elif event.key == pygame.K_BACKSPACE:
                    self.text = self.text[:-1]
                else:
                    self.text += event.unicode

    def draw(self, screen):
        # Render the text.
        text_surface = self.font.render(self.text, True, self.color)
        # Resize the box if the text is too long.
        width = max(200, text_surface.get_width()+10)
        self.rect.w = width
        # Blit the text.
        screen.blit(text_surface, (self.rect.x+5, self.rect.y+5))
        # Draw the rectangle.
        pygame.draw.rect(screen, self.color, self.rect, 2)

To use it do this

input_box = InputBox(100, 100, 140, 32) # position (x and y) and size (width and height)

running = True
while running:
    for event in pygame.event.get():
        input_box.handle_event(event)

    input_box.draw(screen)
    pygame.display.flip()

pygame.quit()