{"id":124637,"date":"2022-11-16T17:43:26","date_gmt":"2022-11-16T16:43:26","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-keypad\/"},"modified":"2025-02-03T16:44:52","modified_gmt":"2025-02-03T15:44:52","slug":"how-to-create-a-keypad","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/how-to-prototype-keypad","title":{"rendered":"Comment prototyper un clavier"},"content":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper un clavier num\u00e9rique.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73246651\/index.html\" width=\"820px\" height=\"440px\" frameborder=\"0\"><\/iframe><\/p>\n<p>Voici comment le construire :<\/p>\n<h3><strong>Voir  <\/strong><\/h3>\n<ul>\n<li>Placez un \u00ab\u00a0Rectangle\u00a0\u00bb sur le canevas et donnez-lui la forme d&rsquo;une touche de clavier.<\/li>\n<li>Double-cliquez sur le rectangle pour activer l&rsquo;option de texte et \u00e9crivez un nombre.<\/li>\n<li>R\u00e9p\u00e9tez l&rsquo;action autant de fois que n\u00e9cessaire pour compl\u00e9ter votre clavier.<br \/>\nPour terminer la vue, s\u00e9lectionnez \u00ab\u00a0Input text field\u00a0\u00bb dans la section \u00ab\u00a0Interactive input fields\u00a0\u00bb et placez-le au-dessus des touches.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70906\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/how-to-create-a-keypad-1.png\" alt=\"\" width=\"790\" height=\"338\"><\/li>\n<\/ul>\n<h3><strong>Ev\u00e9nements  <\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">L&rsquo;un des rectangles \u00e9tant s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.  <\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70906\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/how-to-create-a-keypad-2.png\" alt=\"\" width=\"790\" height=\"338\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Attribuer une valeur \u00e0 un \u00e9l\u00e9ment\u00a0\u00bb, puis s\u00e9lectionnez le \u00ab\u00a0Champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb.  <\/span><\/li>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez le bouton radio \u00ab\u00a0Calcul\u00e9\u00a0\u00bb pour la valeur et cliquez sur \u00ab\u00a0Ajouter une expression\u00a0\u00bb.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70906\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/how-to-create-a-keypad-3.png\" alt=\"\" width=\"790\" height=\"338\"><\/li>\n<li><span data-preserver-spaces=\"true\">Dans le premier champ du constructeur d&rsquo;expression de valeur, faites glisser le \u00ab\u00a0champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb et les fonctions \u00ab\u00a0Concat\u00a0\u00bb ensuite ; pour la derni\u00e8re zone, faites glisser le rectangle. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb et \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <\/span>\n<div class=\"embed-container\" style=\"padding-bottom: 63%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/771557309\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Dans la palette \u00c9v\u00e9nements, cliquez sur le bouton \u00ab\u00a0Copier tous les \u00e9v\u00e9nements\u00a0\u00bb, s\u00e9lectionnez les touches suivantes, une par une, et utilisez le bouton \u00ab\u00a0Coller tous les \u00e9v\u00e9nements\u00a0\u00bb pour coller l&rsquo;\u00e9v\u00e9nement.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/keypad-other-keys-expression.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/keypad-other-keys-expression.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/keypad-other-keys-expression.png\" alt=\"Expression du clavier 2\">Expression du clavier 2<\/video><\/li>\n<\/ol>\n<p>Simulez votre prototype.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper un clavier num\u00e9rique. Voici comment le construire : Voir Placez un \u00ab\u00a0Rectangle\u00a0\u00bb sur le canevas et donnez-lui la forme&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8426,8427],"tags":[],"class_list":["post-124637","post","type-post","status-publish","format-standard","hentry","category-comment-faire","category-logique-dentreprise"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124637"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124637"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124637\/revisions"}],"predecessor-version":[{"id":126208,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124637\/revisions\/126208"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}