MobileHtml5Typing

This is a lua module that allows text input through the <input> tag on the HTML page, only in mobile browsers. It works through jstodef, which is required.

Demo: https://mchlkpng.github.io/mobilehtml5-typing

Feel free to make any changes to the html that you would like.

Installation

• Add a version URL of jstodef to dependencies from their releases. Preferably, use this release as it was used to write this code:

    https://github.com/AGulev/jstodef/archive/refs/tags/2.0.0.zip
  

• Get a version link from Releases or add this link to dependencies:

   https://github.com/mchlkpng/defold-mobilehtml5-typing/archive/main.zip
  

• Require the lua module.

  local mht = require "mobilehtml5typing.index"

Note: The module will only require if it's being run on a mobile browser, so make sure to check if the module had even returned.

if mht then
	
end

API

mht.openTextBox(startingText)

Creates an <input> and <button> node that will take and submit the text.

• startingText - The text that will be inside the input box when opened (can be nil).

Example:

function on_input(self, action_id, action)
    if action_id == hash("touch") and action.pressed and mht then
        mht.openTextBox(self.text)
    end
end

---

mht.onText(self, callback(self, text))

Detects when the text is submitted.

• self - 'self'
• callback - Function called after text is submitted.
      self - 'self'
      text - The text from the input box.

returns:

• listener - Handle for the listener.

Example:

function init(self)
	if mht then
        self.listener = mht.onText(self, function(self, text)
            print("text: ", text)
            label.set_text("#label", text)
        end)
    end
end

---

mht.removeListener(listener)

Removes an existing listener.

• listener - Handle function returned by mht.onText()

Example:

function on_message(self, message_id, message, sender)
	if message_id == hash("removelistener") and mht then
	    mht.removeListener(self.listener)
    end
end

"I want to change up the styling of the textbox and button, how do I do that?"

in the index.lua file, look for the function openTextBox(currentText) function inside html5.run (use CTRL + F). In there, you'll find e.setAttribute("style", ...) and b.setAttribute("style", ...), where you can change the style of the textbox and button respectively.