def setup
createCanvas(100, 100)
background('gray')
textSize(20)
inp = createInput
inp.position(0, 0)
inp.size(100 - 8)
inp.input do # 入力のつど
background('gray')
fill('white')
text(inp.value, 10, 60)
end
inp.changed do # 入力確定(値変更)
background('gray')
fill('yellow')
text(inp.value, 10, 60)
end
end
def setup
createCanvas(100, 100)
background('gray')
textSize(14)
inp = createInput('Zzz+', 'password') # パスワード(伏字)
inp.position(0, 0)
inp.size(100 - 8)
inp.changed do
background('gray')
fill('yellow')
text(inp.value, 10, 60)
end
end
def setup
createCanvas(100, 100)
background('gray')
textSize(14)
inp = createInput('', 'date') # 日付
inp.position(0, 0)
inp.size(100 - 8)
inp.changed do
background('gray')
fill('yellow')
text(inp.value, 10, 60)
end
end
入力ボックスを生成します。
| 引数名 | 内容 | 備考 | オプション | デフォルト値 |
|---|---|---|---|---|
| value | 初期入力値 | ○ | "" | |
| type | タイプ | "text" "password" "number" "search" "date" など 詳細は inputの型 を参照 | ○ | "text" |
elm : p5elementオブジェクト
(<input></input>タグの HTML要素)
・入力ボックスのおもなメソッドなど
| メソッド | 内容 | 備考 |
|---|---|---|
| changed do ... end | 入力ボックスの状態が変わったときに実行される処理ブロックを記述 | |
| input do ... end | 入力ボックスで Enterキーが押されたときに実行される処理ブロックを記述 | |
| value | 入力ボックスの value属性を取得 | |
| value(v) | 入力ボックスの value属性に値vを設定 |