UPDATE: This module has been improved and updated. Use the link below for examples of usage, new properties and an improved event system.
Updated Framer Studio Source & Module: Simple & Advanced Example
This module allows you to easily add text & date inputs to your prototypes. You can also easily listen for focus, blur, Input, valid, invalid and match events by using the custom events added to the InputField class.
Valid input types with keyboard support are: text, email, number, number-only, url, tel, password, search, time, month, date and datetime-local... file will be coming in the next few months.
You’re also able to set the placeHolder, placeHolderColor and placeHolderFocus values, a default value, maxLength, fontSize, fontWeight, fontFamily, indent, lineHeight, maxLength, match (array), pattern (regex pattern), autoCapitalize, autoComplete, autoCorrect, and autoCapitalize properties.
Here’s a quick usage example:
myInput = new InputField
width: Screen.width
height: 132
color: "black"
backgroundColor: "#fff"
placeHolder: "Search...”
myInput.on Events.Input, (value, layer) ->
print “INPUT”, value, layer, @isEmpty
Here’s a more advanced usage example:
colorInput = new InputField
name: "colorInput"
type: “text”
width: Screen.width
height: 132
x: 0
y: 0
color: "black"
backgroundColor: "#fff"
indent: 48
fontSize: 48
fontWeight: 600
fontFamily: “Georgia, serif”
placeHolder: "Enter Hexadecimal Color"
placeHolderFocus: "#_ _ _ _ _ _"
placeHolderColor: “silver”
autoCapitalize: false
autoComplete: false
autoCorrect: false
maxLength: 7
pattern: "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
match: ["orange", "Orange", "red", "Red", "blue", "Blue"]
value: ""
colorInput.on Events.Input, (value, layer) ->
print "Input", value, layer, @.isEmpty
colorInput.on Events.Focus, (value, layer) ->
print "Focus", value, layer
colorInput.on Events.Blur, (value, layer) ->
print "Blur", value, layer
colorInput.on Events.Valid, (value, layer) ->
print "Valid", value, layer
colorInput.on Events.Invalid, (value, layer) ->
print "Invalid", value, layer
colorInput.on Events.Match, (value, layer) ->
print "Match", value, layer
Framer Studio Source: Simple Example (outdated)
Framer Studio Source: Advanced Example (outdated)
Module Code by Jordan Dobson
jbbartram-illu
tangentwithtanner
dededos
areudirty