{"id":902,"date":"2022-12-27T22:12:21","date_gmt":"2022-12-27T13:12:21","guid":{"rendered":"https:\/\/helpme.center\/?page_id=902"},"modified":"2022-12-27T22:21:42","modified_gmt":"2022-12-27T13:21:42","slug":"resize-test","status":"publish","type":"page","link":"https:\/\/helpme.center\/en\/resize-test\/","title":{"rendered":"Auto resizing input"},"content":{"rendered":"\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\">\n'use strict';\n\n$(document).ready(function() {\n  var $inputText = $('.js-input-text');\n  var $dummyInputText = $('.js-dummy-input-text');\n\n  function updateValue(e) {\n    var value = $(e.target).val();\n    $(e.target).prev($dummyInputText).text(value);\n  }\n\n  $inputText.on('keyup', updateValue);\n  $inputText.on('compositionend', updateValue);\n});\n<\/script>\n\n<style>\n\/* http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\n   v2.0 | 20110126\n   License: none (public domain)\n*\/\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\/* HTML5 display-role reset for older browsers *\/\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n\tline-height: 1;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}\n\n\/* *\/\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, '\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 ProN W3', Hiragino Kaku Gothic ProN, Arial, '\u30e1\u30a4\u30ea\u30aa', Meiryo, sans-serif;\n  line-height: 1.4;\n  padding: 32px;\n  color: #4a4a4a;\n}\n\n.headline {\n  margin-bottom: 32px;\n}\n\n.input-text {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, '\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 ProN W3', Hiragino Kaku Gothic ProN, Arial, '\u30e1\u30a4\u30ea\u30aa', Meiryo, sans-serif;\n  font-size: 16px;\n  line-height: 1.4;\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  padding: 2px 4px;\n  color: #4a4a4a;\n  border: 1px solid #ccc;\n  background: none;\n}\n\n.input-text::placeholder {\n  opacity: 0.5;\n}\n\n.input-text:focus::placeholder {\n  opacity: 0;\n}\n\n.input-text__wrapper {\n  display: block;\n  margin-bottom: 32px;\n}\n.input-text__item {\n  position: relative;\n  display: inline-block;\n}\n\n.input-text__dummy {\n  font-size: 16px;\n  display: inline-block;\n  overflow: hidden;\n  min-width: 1em;\n  padding: 3px 5px;\n  white-space: nowrap;\n  opacity: 0;\n}\n\n.input-text__dummy::before {\n  content: '';\n}\n\n.input-text__dummy:empty::before {\n  content: attr(data-placeholder);\n}\n\n.input-text__separate {\n  font-size: 22px;\n  line-height: 1;\n  display: inline-block;\n  vertical-align: 6px;\n}\n<\/style>\n\n  <div class=\"input-text__wrapper\">\n    <div class=\"input-text__item\">\n      <div class=\"input-text__dummy js-dummy-input-text\" data-placeholder=\"\u6587\u5b57\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\"><\/div>\n      <input type=\"text\" class=\"js-input-text input-text\" placeholder=\"\u6587\u5b57\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\">\n    <\/div>\n    <div class=\"input-text__separate\">\/<\/div>\n    <div class=\"input-text__item\">\n      <div class=\"input-text__dummy js-dummy-input-text\" data-placeholder=\"placeholder\u77ed\u3044\u5834\u5408\"><\/div>\n      <input type=\"text\" class=\"input-text js-input-text\" placeholder=\"placeholder\u77ed\u3044\u5834\u5408\">\n    <\/div>\n    <div class=\"input-text__separate\">\/<\/div>\n    <div class=\"input-text__item\">\n      <div class=\"input-text__dummy js-dummy-input-text\" data-placeholder=\"placeholder\u9577\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u3044\u5834\u5408\"><\/div>\n      <input type=\"text\" class=\"js-input-text input-text\" placeholder=\"placeholder\u9577\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u301c\u3044\u5834\u5408\">\n    <\/div>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>\/ \/<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":89,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-902","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/pages\/902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/comments?post=902"}],"version-history":[{"count":6,"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/pages\/902\/revisions"}],"predecessor-version":[{"id":908,"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/pages\/902\/revisions\/908"}],"up":[{"embeddable":true,"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/pages\/89"}],"wp:attachment":[{"href":"https:\/\/helpme.center\/wordpress\/wp-json\/wp\/v2\/media?parent=902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}