Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
TextInputDialog not working in HTML — Gideros Forum
  • Home
    • ›

    TextInputDialog not working in HTML

    perrochonperrochon Member
    in Bugs and issues
    I am using a TextInputDialog, and it works in the Android and Windows Players, but not in HTML (tested Chrome, Firefox) on two machines. Code is below. The HTML app runs here: https://www.perrochon.com/BushidoBattle/

    Instructions to reproduce: Click on [HERO] then click on the name of one of the heroes

    The dialog pops up, but cannot be edited. (except from one backspace)

    Also (depending on your window dimenstons) if you click e.g. on the right most hero, the text dialog pops up in the middle over the second hero. If you click "cancel" the click goes to the name sprite of the hero below.
    	heroName = TextButton.new(hero.name)
	-- set Pos, etc.
	heroName:addEventListener("click", function ()
		local textInputDialog = TextInputDialog.new("Change Hero Name", "Enter Hero Name", 
			hero.name, "Cancel", "Save")
		textInputDialog:addEventListener(Event.COMPLETE, function(event)
			if event.buttonIndex ~= nil then
				hero.name = event.text:sub(1,8)
				hero:save()
				sceneManager:changeScene(SCENE_CHOOSE_HERO, 0, TRANSITION) 				
			end
		end)
		textInputDialog:show()
	end)
    +1 -1Share on Facebook

    Comments

    • hgy29hgy29 Maintainer
      Yes, looks like something has changed in the event processing for html. Maybe something need to be fixed in the .css or in the js code. I will have a look. However try to avoid TextInputDialog, it will feel more natural if you can keep your graphical theme. I have a TextEditor component that I can share, I will do.
      +1 -1Share on Facebook
    • perrochonperrochon Member
      Awesome. I hate the way the system TextInputDialog looks
      +1 -1Share on Facebook
    • hgy29hgy29 Maintainer
      Here it is.

      It basically works like a TextField (same constructor).

      Typical use:
      local editor=TextEdit.new(TTFont.new("gfx/OpenSans-Bold.ttf",20,""),"Edit this",{w=100,flags=FontBase.TLF_REF_LINETOP|FontBase.TLF_NOWRAP})
stage:addChild(editor)
editor:setPosition(10,10)
 
editor:startEditing()
 
--editor:stopEditing()
      lua
      lua
      textedit.lua
      9K

      Likes: keszegh, MoKaLux, rrraptor

      +1 -1 (+3 / -0 )Share on Facebook
    • keszeghkeszegh Member
      Accepted Answer
      thanks @hgy29 , i will also check it out.
      Longtitle Productions, creator of
      Fragmenter - animated loop machine and IKONOMIKON - the memory game
      +1 -1Share on Facebook
    • rrraptorrrraptor Member
      edited June 2020
      hgy29 said:

      Here it is.

      It basically works like a TextField (same constructor).

      Typical use:

      local editor=TextEdit.new(TTFont.new("gfx/OpenSans-Bold.ttf",20,""),"Edit this",{w=100,flags=FontBase.TLF_REF_LINETOP|FontBase.TLF_NOWRAP})
stage:addChild(editor)
editor:setPosition(10,10)
 
editor:startEditing()
 
--editor:stopEditing()
      Ah, I thought that it can handle tabs :) There is my comment:
      http://forum.giderosmobile.com/discussion/comment/63070/#Comment_63070

      Also, in order to use ur class on mobiles you'll need to show a keyboard. So this: application:setKeyboardVisibility(true) will show me the keyboard, but how do I get its input?
      SuperShape | Nice blured shapes with shadows | Simple button pad | Simple layer class | Simple UI library | 2D camera lib | Color picker | FPS graph | Dear ImGui | cute_c2
      +1 -1Share on Facebook
    • hgy29hgy29 Maintainer
      yes, on mobile you need to call setKeyboardVisibility(true) at the same time you call startEditing(), then input can be received from Event.KEY_CHAR,Event.KEY_DOWN and Event.KEY_UP. Actually this class of mine is part of my larger UI project, with a few changes to be used without the other files.
      About the tab, yes it is supposed to be supported, but I didn't check your issue yet.
      +1 -1Share on Facebook
    • perrochonperrochon Member
      C'est drole. Je parle francais, mais mon ordinateur ne peut pas


      image.png
      625 x 192 - 20K
      +1 -1Share on Facebook
    • perrochonperrochon Member
      edited June 2020
      Thanks @hgy29. I included your code. A few follow up questions

      1. I have application:setOrientation(Application.LANDSCAPE_LEFT) and I do application:setKeyboardVisibility(true). However the keyboard on the Android Player (didn't deploy an app) comes up in portrait mode

      2. I also want to limit text length. Is a modification like this UTF8 safe? The number 11
      is something that would go in with the constructor as optional
      function TextEdit:addChars(c)
	local np
	if self.password then
		self:hideLast()
		local t=self:_getText()
		t,np=addCharsUtf8(t,self.caretPos+1,c)
		self.lastVisible={s=self.caretPos+1,e=np,t=os:timer()+HIDE_TIMER}
		self:_setText(t)
		local p=skipCharsUtf8(self.text,self.caretPos//#self.password)
		self.caretPos=np-1
		self.text=addCharsUtf8(self.text,p,c)
	else
		local t=self:_getText()
		if countCharsUtf8(t) < 11 then  --  SILENTLY IGNORE INPUT LONGER THAN 11
			t,np=addCharsUtf8(t,self.caretPos+1,c)
			self.caretPos=np-1
			self:setText(t)
		end
	end
	self:setCaretPos(self.caretPos)
	self:textChanged()
end
      +1 -1Share on Facebook
    Sign In or Register to comment.