Input Fields in Tumult Hype and Pubcoder

Hello,
I'm not quite sure if I'm right here with my problem. I used tumult hype to develop an interactive task for my students. They have to write something into an input field. Then I used pubcoder to import it - using iframe. Previewing it in pubcoder everything works fine. But if I open the epub file, I cannot select the input field and I cannot write in it.
Is there anyone with similar problems?

Michael.

On what device / reader are you opening the epub file? Each one unfortunately allows different things and behaves differently...

I use Books on an iMac and the. iOS-Version of Books. The "select-fields" work fine. Only the input fields get deactivated.

I tested Adobe digital Editions 4.5 and everything works fine!

There's a couple recommendations here: https://discussions.apple.com/thread/3752562

If you have a form, you could try:

<input contenteditable="true">....</input>

I also found this solution, but it doesn't work with recent version of Apple Books.

Another alternative I found is using javascript to enable the input field, but this doesn't work either.

hypeDocument.getElementById('mrna').removeAttribute('disabled');

Are you placing your code in a rectangle or HTML widget? I recommend using a rectangle to avoid the the epub needing to load two iframes.

Or, you could use the 'smart object' element in pubcoder to embed your HTML that way:

If that doesn't work, can you share what you have so I can try to find a workaround?

Here are three pages of the ebook. So you can see, what I am looking for.

Unfortunately not having any luck on iBooks on Mac -- I'm assuming this type of input is just not allowed. (This is the same for a XHTML compatible form in a smart object in PubCoder and a normal form inside of a Hype document)

One option is to allow clicking on individual base pairs to fill in an input field. It seems you will need to simulate a keyboard. (@MarkHunte to the rescue... --> Virtual keyboard for use with Textareas )

Thank you for investing your time on my problem. It seems to me that it is easier to tell my students to turn to pen and paper for that kind of tasks if they don‘t want to change their ebook reader. Perhaps in iPad OS 14 there is a change in the behavior of the App.

To clarify, does this happen still in non-hype widgets in pubcoder?

If so, I'd recommend contacting pubcoder if you haven't done so... otherwise we can investigate further.

Yes i have tested this only using Pubcoder. Select fields are working input fields not. I think it is a problem with Apple Books. Unfortunately the forum of Pubcoder isn‘t quite as active as this forum and from Pubcoder I haven‘t got an answer yet.
If I add „contenteditable“ I can write next to the input field, but not in it.

1 Like

Did anyone find a solution to this? I'm having the same issue.

Hype > Pubcoder > Books (on iPad or Mac) isn't allowing text input
Hype > iBooks Author > Books (on same iPad/Mac) is fine

I think the first question I'd ask is if you are using an HTML Widget or just a Rectangle element for the input code? I know we had some other issues iframes (which are the basis of HTML Widgets) in pubcoder before, so if you're using that I'd try a Rectangle element, which is a basic div on the page.

Beyond that, I'd recommend reaching out to pubcoder support. (Please reply back if they say anything useful!)

Thanks Jonathan,

In Hype I'm using a rectangle element to contain the input e.g. is in the rectangle.

Export hype to a folder > import into pubcoder using the smart object as described in your support page.

I found the same question on Pubcoder support and they say that iBooks/Books app blocks text entry which clearly isn't the case. The same hype document, exported as a widget and then embedded in iBooks Author doesn't block the data input in iBooks/Books.

Is there an alternative to Pubcoder as a replacement for iBooks Author?

This is what I put in the rectangle:
<input class="calcnumberinput" type="number" value="100" id="uptakePercentage" style="padding: 5px;">

Please try using this more xhtml compliant method which might be better understood by the ancient webviews that epub is more tuned to:

<input class="calcnumberinput" type="number" value="100" id="uptakePercentage" style="padding: 5px;" />

This version just has a closing slash.

InDesign is the other tool that is popular for EPUB creation.

Thanks Daniel,

That didn't work. Perhaps .epub just doesn't allow input but .iBook does. I'll try Indesign and if all else fails I'll have to set up a VM running Catalina and install iBooks Author.

I need a better longer term solution for running a hype doc locally on an iPad (i.e. no internet connection needed). The entire presentation is in Hype – I'm only using iBooks Author/Pub coder as a way of loading it onto the iPad. Short of rebuilding it as an app I'm out of ideas unless you can think of any other way of loading it.

There's many options for offline document viewing on an iPad besides Epub -> iBooks, check out a few of these: Displaying a Tumult Hype document in a Kiosk or as an app

What are some of your other requirements for this project besides offline input capturing?

1 Like