{"id":3601,"date":"2022-09-09T13:03:24","date_gmt":"2022-09-09T04:03:24","guid":{"rendered":"https:\/\/weseek.co.jp\/tech\/?p=3601"},"modified":"2023-04-17T10:46:18","modified_gmt":"2023-04-17T01:46:18","slug":"%e3%80%90html%e3%80%91input-%e3%82%bf%e3%82%b0%e3%81%a7%e3%82%a8%e3%83%b3%e3%82%bf%e3%83%bc%e3%82%92%e6%8a%bc%e3%81%97%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ab%e5%a4%89%e6%8f%9b%e3%81%8b%e3%81%a9%e3%81%86","status":"publish","type":"post","link":"https:\/\/weseek.co.jp\/tech\/3601\/","title":{"rendered":"\u3010HTML\u3011input \u30bf\u30b0\u3067\u30a8\u30f3\u30bf\u30fc\u3092\u62bc\u3057\u305f\u3068\u304d\u306b\u5909\u63db\u304b\u3069\u3046\u304b\u3092\u5206\u5c90\u3059\u308b"},"content":{"rendered":"<h1>\u8981\u6c42<\/h1>\n<p>React \u306e\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3042\u308a\u3001<code>onKeyDownHandler<\/code> \u3067&quot;\u6587\u5b57\u306e\u5909\u63db\u3092\u78ba\u5b9a\u3057\u305f\u3068\u304d\u306e\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u62bc\u4e0b&quot;\u3068&quot;\u305d\u308c\u4ee5\u5916\u306e\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u62bc\u4e0b&quot;\u3092\u533a\u5225\u3057\u305f\u3044\u3002<\/p>\n<pre><code class=\"language-js\">const Component = () =&gt; {\n  const onKeyDownHandler = (e) =&gt; {\n    if (e.key === &#039;Enter&#039;) {\n      \/\/ \u3053\u308c\u3060\u3068\u5168\u3066\u306e\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u62bc\u4e0b\u3067\u3053\u306e\u30d6\u30ed\u30c3\u30af\u306b\u5230\u9054\u3059\u308b\n    }\n  };\n  return &lt;input onKeyDown={onKeyDownHandler} \/&gt;;\n};<\/code><\/pre>\n<h1>\u89e3\u6c7a\u6cd5<\/h1>\n<p>onCompositionStart \u3068 onCompositionEnd \u3067\u5909\u63db\u3092\u691c\u77e5\u3059\u308b\u3002\u8a73\u3057\u304f\u306f<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CompositionEvent\">\u3053\u3061\u3089<\/a><\/p>\n<pre><code class=\"language-js\">const Component = () =&gt; {\n  const [isComposing, setComposing] = useState(false);\n  const onKeyDownHandler = () =&gt; {\n    if (e.key === &#039;Enter&#039; &amp;&amp; !isComposing) {\n      \/\/ \u5909\u63db\u306e\u305f\u3081\u306e\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u62bc\u4e0b\u306e\u3068\u304d\u306f\u3053\u3053\u306b\u5230\u9054\u3057\u306a\u3044\n    }\n  };\n  return &lt;input\n           onKeyDown={onKeyDownHandler}\n           onCompositionStart={() =&gt; setComposing(true)}\n           onCompositionEnd={() =&gt; setComposing(false)}\n         \/&gt;;\n};<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u8981\u6c42 React \u306e\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3042\u308a\u3001onKeyDownHandler \u3067&quot;\u6587\u5b57\u306e\u5909\u63db\u3092\u78ba\u5b9a\u3057\u305f\u3068\u304d\u306e\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u62bc\u4e0b&quot;\u3068&quot;\u305d\u308c\u4ee5\u5916\u306e\u30a8\u30f3\u30bf\u30fc\u30ad\u30fc\u62bc\u4e0b&quot;\u3092\u533a\u5225\u3057\u305f\u3044<\/p>\n","protected":false},"author":3,"featured_media":3623,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[161,31],"tags":[],"_links":{"self":[{"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/posts\/3601"}],"collection":[{"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/comments?post=3601"}],"version-history":[{"count":3,"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/posts\/3601\/revisions"}],"predecessor-version":[{"id":4234,"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/posts\/3601\/revisions\/4234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/media\/3623"}],"wp:attachment":[{"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/media?parent=3601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/categories?post=3601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weseek.co.jp\/tech\/wp-json\/wp\/v2\/tags?post=3601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}