连续 30 天 玩玩看 ProtoPie - Day 13

今天延续昨天的文字输入,我们来做更多尝试。

https://ithelp.ithome.com.tw/upload/images/20210928/2014194176nWGJWZVU.png

讲者把昨天 Text > Input 做出来的 Input 复制三个。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941C3Bz160Ujg.png

Shift + Option 直接往下复制出两个就行。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941PjwV7Je3VQ.png

我们帮几个都设定好提示文字 Placeholder 。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941iUz8Tq9JYU.png

使用 Return Trigger 和 Focus Response

以这个例子来说,要接连输入姓名、密码两次。

要怎麽样让使用者可以输入完一行之後,可以不用离开手机键盘,直接到下一个输入区呢?

这时候就要用 Return 这个 Trigger。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941mOsDqiYmPQ.png

我们先帮 Input 1 选择 Return 这个 Trigger ,接着选择 Focus 作为 Response 。

Focus 有 Focus In 和 Focus Out 两种。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941U8kxNunPdN.png

但这个讲者跟之前的讲者不太一样,之前那位通常会换句话说,或是用不同的文字,或是立刻找一个例子。

这个讲者刚刚用手比了一下,Focus In 就是 In (手往内抓一下)。
至於 Focus Out 他就说...我们等等再看个例子。

好吧,我们继续看下去,他应该会解释 lolll

总之 Input 1 的名字输入後,我们要 Focus In 下一个密码输入的 Input 2 。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941PQLKZE0Zpw.png

其实讲者有把旁边的 Input 1跟 Input 2 好好的改好名字,这是比较正确的做法,尤其跟别人协作的时候。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941Ul3E8qlt3C.png

但今天有点赶可能没时间回去重新截图...

Preview 测试之前,我们也来改一下一些设定。

第一个名字输入我们 Type 用 Text 作为输入键盘。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941rPAGCJqwmk.png

然後我们既然希望他们可以输入完毕跳到下一个,我们选择键盘的 Return 为 Next 。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941BxakiIMiuy.png

这样使用者输入完名字,按下 Next ,很合理的可以输入下一个栏位。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941oc00wu9Uk1.png

手机键盘右下角是 Next 而且按下去之後就会自动跳到下一格。

https://ithelp.ithome.com.tw/upload/images/20210928/20141941ikGXbM8dwd.png

下一个讲者终於解释 Focus In 跟 Focus Out 的差别。

原来 Focus 可以当作 Trigger 也可以当作 Response 。
(Trigger 和 Response 两个都点看看都会找到。)

虽然举了一个例子,还是觉得有点模糊,我直接跑去看 Documentation 。

https://www.protopie.io/learn/docs/interactions/triggers#focus

“A focus in entails that the blinking cursor appears and for smart devices the native keyboard becomes visible. A focus out would be the opposite of a focus in.”

所以就是 Focus In 当作 Trigger 的时候,会造成游标出现然後键盘会上升,Focus Out 就会造成相反的结果,因此就是点击之後会跳出。

明天来看看讲者到底怎麽解释 Focus In 和 Focus Out 吧!


<<:  [Day13] TS:什麽!这个 typeof 和我想的不一样?

>>:  Day13 - 用 canvas 复刻 小画家 选择剪下移动

[Day??] 2021 iThome 铁人赛 - 颁奖典礼 @ 2022.01.08‧辅仁大学

前言 抱歉打扰了XD 但是我真的太想来分享,所以还是厚着脸皮(?)来po文了XD 我这次有参加铁人赛...

[ Day 37 ] - 在 Github Release 上发布我们的安装档

之前本鲁都将打包出来的安装档 , 放到 git 中上传到 github 中 来产生一个公开连结让邦友...

Day4 回忆篇 那个关於乖乖的传说-1

最近在某网通群组刚好有聊到,所以乾脆来写一篇文解释一下乖乖传说背後的科学论证吧 先说明缘起,到底是哪...

卡夫卡的藏书阁【Book21】- Kafka - KafkaJS 消费者 3

“Now I can look at you in peace; I don't eat you ...

从零开始学游戏开发:建立得分条 Part1.开始

这是 Roblox 从零开始系列,使用者介面章节的第一个单元,你将开始学习如何设计出一个精美的得分条...