This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted May 17 - Read on Facebook

MODULE: InputField Class

**UPDATE** Use this module now: http://jrdn.io/fcG1

OLD Demo & Module Post: http://jrdn.io/eLin

This module allows you to easily add text & date inputs to your prototypes. You can also easily listen for onFocus, onBlur and onInput events by providing a function for the input to call to get the values and the input field involved.

Valid input types with keyboard support are: text, email, number, url, tel, password, search, time, month, date and datetime-local

You’re also able to set the placeholder and placeholderFocus values, a default value, maxLength, fontSize, indent and autoCapitalize properties.

Here’s a quick usage example:

searchField = new InputField
 width: Screen.width
 height: 132
 fontSize: 48
 indent: 48
 color: “black”
 backgroundColor: “white”
 placeHolder: “Search…”
 onInputFunction: myOnInputFunction

Here’s a more advanced usage example:

ageField = new InputField
 name: “ageField”
 width: Screen.width
 type: “number”
 height: 132
 fontSize: 48
 indent: 48
 color: “black”
 backgroundColor: “white”
 placeHolder: “Enter Your Age Please”
 placeHolderFocus: “Your Age”
 maxLength: 2
 onInputFunction: myOnInputFunction
 onFocusFunction: onInputFocus
 onBlurFunction: onInputBlur

I hope this helps you in your prototyping!

Framer Studio Source - Simple:
 http://jrdn.io/2R0P2P0L3n3B

Framer Studio Source - Advanced:
 http://jrdn.io/2f0w0o0m3u0h

Module Code:
 NEW: http://jrdn.io/422q45143f18
 OLD: http://jrdn.io/3K2K451a1m1h

Happy New Year all!

#framercode

29 Comments

Peter Botond

Jordan Robert Dobson When i focus on an input the page scrolls back to the top. How can i deactivate this?

Laura Baker

This is a really helpful module thanks Jordan! I was just wondering if you can update the field type to toggle between the "password" and "text" input or whether it has to stay as on or the other?

Jean-Francois Hector

Thanks a lot

Rich Zarick

Yup, this is a serious upgrade from previous modules. Thank you sir, this will get some good usage

Jordan Robert Dobson

Thanks to Lauren for the video!

Jared Palmer

Great job. This is awesome.

Stephen Crowley

Been doing some rad stuff with this module, thanks for all the hard work Jordan!

Jeongmin Kim

brilliant idea!

Andrew Nalband

Awesome!

Marc Krenn

Brilliant. Absolutely brilliant. This module will be a true time saver for all of us!

Adria Jimenez

Which is the difference from this module with my module? https://github.com/ajimix/Input-Framer You could have collaborated with my module so everyone could have benefit from your changes :)

Giovanni Caruso

Cool! Thanks for sharing :)

Jorn van Dijk

Good lawd!

Jordan Robert Dobson

Let me know if you use this and would like any features added.

Ban Nguyen

Very nice! Thank you for this.

Ban Nguyen

Jordan Robert Dobson, I am trying to put these fields inside a container (new Layer, ScrollComponent, PageComponent), it seems odd with y loc, not sure if i am missing anything: http://share.framerjs.com/ph34vxzph4m6/

Jordan Robert Dobson

I added an update to this that allows you to change the color of the placeholder, set more attributes on the font weight, font size, line height, font family... etc..

Also you can validate if entries fit a pattern or matches a string or an array of strings.

Also... there are 6 events now Input, Focus, Blur, Valid, Invalid, Match that you can listen for on the input field.

http://jrdn.io/422q45143f18

Luca Galvani

Jordan Robert Dobson any idea why when I import this module Framer throws this error?
TypeError: Object is not a constructor (evaluating 'new InputField') o.O

Didi Medina

would love to see some ideas built on this module for inspiration, if anyone has any to share :)

Nelson Vasconcelos

Hi Jordan Robert Dobson, thanks for uploading this amazing module!!!

I am testing the module on my Android but whenever I click on an input field the keyboard goes up and immediately closes. It seems there's a blur event dispatched just after the focus. Did you get this bug?

Ban Nguyen

Is there a way to assign .focus()?

Andrew Nalband

Jordan Robert Dobson is there a way to clear the input? I tried myInput.value = "" but that didn't seem to work

Jordan Robert Dobson

Here is the latest version as of Tuesday last week... http://jrdn.io/422q45143f18

Chad Lonberger

Hey Jordan Robert Dobson, this is an awesome module thanks for sharing it! Quick question - any idea how to prevent shuddering on the device when the input is 400+ pixels down the screen? Noticing it on IOS whenever the keyboard opens -> http://share.framerjs.com/nbmsib1qckqk/

Floris Verloop

Amazing man!

Adam Noffsinger

Jordan have you explored removing the form assistant (< > and Done) from the safari keyboard? I'm trying to accomplish this now to emulate native app behavior but all signs are pointing to it not being possible.

Jordan Robert Dobson

Hey all... I forgot to mention this updated with a new example and a much improved event system. See this post on FramerCo.de:

http://framerco.de/post/136846506048/module-inputfield-class-update-this-module-has

Nelson Vasconcelos

Thank you very much Jordan! This is my favorite Framer module! :)

Jordan Robert Dobson

I'm also posting this code up at https://github.com/seattle-framer/

Read the entire post on Facebook