{"id":18718,"date":"2025-05-29T07:55:10","date_gmt":"2025-05-29T07:55:10","guid":{"rendered":"https:\/\/www.digmandarin.com\/?page_id=18718"},"modified":"2025-05-29T09:06:29","modified_gmt":"2025-05-29T09:06:29","slug":"pinyin-input","status":"publish","type":"page","link":"https:\/\/www.digmandarin.com\/pinyin-input","title":{"rendered":"Pinyin Input"},"content":{"rendered":"<h1 class=\"wp-block-heading\" id=\"chinese-pinyin-keyboard\">Chinese Pinyin Keyboard<\/h1>\n\n\n<style>\n  #pinyin-input { width:100%; height:6em; font-size:1.2em; font-family:sans-serif; }\n  #keyboard { display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin-top:10px; }\n  #keyboard button, #copy-btn {\n    padding:8px; font-size:1em; border:1px solid #ccc; border-radius:4px; cursor:pointer; font-family:sans-serif;\n  }\n  #keyboard button:hover, #copy-btn:hover { background:#f0f0f0; }\n  #copy-btn { margin-top:10px; }\n<\/style>\n\n<textarea id=\"pinyin-input\" placeholder=\"Type pinyin here (use numbers for tones, e.g. hao3)\" maxlength=\"1000\"><\/textarea>\n<button id=\"copy-btn\">Copy<\/button>\n<div id=\"keyboard\"><\/div>\n\n<script>\n  \/\/ get elements\n  const textarea = document.getElementById('pinyin-input');\n  const keyboard = document.getElementById('keyboard');\n  const copyBtn = document.getElementById('copy-btn');\n\n  \/\/ tone map\n  const toneMap = {\n    a1:'\u0101',a2:'\u00e1',a3:'\u01ce',a4:'\u00e0',a5:'a',\n    o1:'\u014d',o2:'\u00f3',o3:'\u01d2',o4:'\u00f2',o5:'o',\n    e1:'\u0113',e2:'\u00e9',e3:'\u011b',e4:'\u00e8',e5:'e',\n    i1:'\u012b',i2:'\u00ed',i3:'\u01d0',i4:'\u00ec',i5:'i',\n    u1:'\u016b',u2:'\u00fa',u3:'\u01d4',u4:'\u00f9',u5:'u',\n    \u00fc1:'\u01d6',\u00fc2:'\u01d8',\u00fc3:'\u01da',\u00fc4:'\u01dc',\u00fc5:'\u00fc'\n  };\n\n  \/\/ convert numeric to accented pinyin\n  function convertTone(text) {\n    return text.replace(\/([a-z\u00fcv:]+?)([1-5])\/gi, (m, syl, num) => {\n      let s = syl.toLowerCase().replace(\/v\/g,'\u00fc').replace(\/u:\/g,'\u00fc');\n      let target = '';\n      if (\/iu\/.test(s)) target='u';\n      else if (\/ui\/.test(s)) target='i';\n      else for (let v of ['a','o','e','i','u','\u00fc']) if (s.includes(v)) { target=v; break; }\n      if (!target) return m;\n      const accented = toneMap[target+num];\n      if (!accented) return m;\n      let used=false;\n      return s.split('').map(ch => {\n        if (!used && ch===target) { used=true; return accented; }\n        return ch;\n      }).join('');\n    });\n  }\n\n  \/\/ build keyboard\n  Object.values(toneMap).forEach(ch => {\n    const btn = document.createElement('button');\n    btn.textContent = ch;\n    btn.addEventListener('click', () => {\n      if (textarea.value.length < 1000) textarea.value += ch;\n      textarea.dispatchEvent(new Event('input'));\n      textarea.focus();\n    });\n    keyboard.appendChild(btn);\n  });\n\n  \/\/ live convert\n  textarea.addEventListener('input', () => {\n    const pos = textarea.selectionStart;\n    const conv = convertTone(textarea.value);\n    if (conv !== textarea.value) {\n      textarea.value = conv;\n      textarea.setSelectionRange(pos, pos);\n    }\n  });\n\n  \/\/ copy functionality\n  copyBtn.addEventListener('click', () => {\n    const text = textarea.value;\n    if (navigator.clipboard) {\n      navigator.clipboard.writeText(text)\n        .then(() => alert('Copied to clipboard'))\n        .catch(() => alert('Copy failed, please copy manually'));\n    } else {\n      textarea.select();\n      document.execCommand('copy');\n      alert('Copied to clipboard');\n    }\n  });\n<\/script>\n\n\n<h2 class=\"wp-block-heading\" id=\"instructions\"><strong>Instructions<\/strong><\/h2>\n\n\n<p>A simple tool that helps you type Chinese pinyin with tone marks\u2014no special software needed.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"how-it-works\">How It Works<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li>Enter your pinyin syllables followed by tone numbers. <br>Example: type <code>hao3<\/code> \u2192  <strong>h\u01ceo<\/strong>; <code>ni3hao3<\/code> \u2192 <strong>n\u01d0h\u01ceo<\/strong>.<\/li>\n\n\n\n<li>Use <code>v:<\/code> for the \u201c\u00fc\u201d sound (e.g. <code>nv3<\/code> \u2192 <strong>n\u01da<\/strong>).<\/li>\n\n\n\n<li>Click the buttons for all the accented vowels (\u0101 \u00e1 \u01ce \u00e0, \u0113 \u00e9 \u011b \u00e8, etc.)<\/li>\n\n\n\n<li>Hit<strong> \u201cCopy\u201d<\/strong> and paste your perfectly accented pinyin anywhere.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Chinese Pinyin Keyboard Copy Instructions A simple tool that helps you type Chinese pinyin with tone marks\u2014no special software needed. How It Works<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18718","page","type-page","status-publish","hentry","entry","no-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pinyin Input \u2013 Online Pinyin Keyboard for Mandarin Tone Marks<\/title>\n<meta name=\"description\" content=\"Use the online pinyin keyboard to type Chinese pinyin with accurate tone marks instantly. Supports numeric tone input, clickable tone keys, and one-click copy.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digmandarin.com\/pinyin-input\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pinyin Input \u2013 Online Pinyin Keyboard for Mandarin Tone Marks\" \/>\n<meta property=\"og:description\" content=\"Use the online pinyin keyboard to type Chinese pinyin with accurate tone marks instantly. Supports numeric tone input, clickable tone keys, and one-click copy.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digmandarin.com\/pinyin-input\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-29T09:06:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digmandarin.com\/wp-content\/uploads\/2016\/08\/DigMandarin_fb.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"845\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@digmandarin\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.digmandarin.com\/pinyin-input\",\"url\":\"https:\/\/www.digmandarin.com\/pinyin-input\",\"name\":\"Pinyin Input \u2013 Online Pinyin Keyboard for Mandarin Tone Marks\",\"isPartOf\":{\"@id\":\"https:\/\/www.digmandarin.com\/#website\"},\"datePublished\":\"2025-05-29T07:55:10+00:00\",\"dateModified\":\"2025-05-29T09:06:29+00:00\",\"description\":\"Use the online pinyin keyboard to type Chinese pinyin with accurate tone marks instantly. Supports numeric tone input, clickable tone keys, and one-click copy.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.digmandarin.com\/pinyin-input#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.digmandarin.com\/pinyin-input\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.digmandarin.com\/pinyin-input#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.digmandarin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pinyin Input\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.digmandarin.com\/#website\",\"url\":\"https:\/\/www.digmandarin.com\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.digmandarin.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pinyin Input \u2013 Online Pinyin Keyboard for Mandarin Tone Marks","description":"Use the online pinyin keyboard to type Chinese pinyin with accurate tone marks instantly. Supports numeric tone input, clickable tone keys, and one-click copy.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.digmandarin.com\/pinyin-input","og_locale":"en_US","og_type":"article","og_title":"Pinyin Input \u2013 Online Pinyin Keyboard for Mandarin Tone Marks","og_description":"Use the online pinyin keyboard to type Chinese pinyin with accurate tone marks instantly. Supports numeric tone input, clickable tone keys, and one-click copy.","og_url":"https:\/\/www.digmandarin.com\/pinyin-input","article_modified_time":"2025-05-29T09:06:29+00:00","og_image":[{"width":845,"height":450,"url":"https:\/\/www.digmandarin.com\/wp-content\/uploads\/2016\/08\/DigMandarin_fb.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@digmandarin","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.digmandarin.com\/pinyin-input","url":"https:\/\/www.digmandarin.com\/pinyin-input","name":"Pinyin Input \u2013 Online Pinyin Keyboard for Mandarin Tone Marks","isPartOf":{"@id":"https:\/\/www.digmandarin.com\/#website"},"datePublished":"2025-05-29T07:55:10+00:00","dateModified":"2025-05-29T09:06:29+00:00","description":"Use the online pinyin keyboard to type Chinese pinyin with accurate tone marks instantly. Supports numeric tone input, clickable tone keys, and one-click copy.","breadcrumb":{"@id":"https:\/\/www.digmandarin.com\/pinyin-input#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digmandarin.com\/pinyin-input"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.digmandarin.com\/pinyin-input#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digmandarin.com\/"},{"@type":"ListItem","position":2,"name":"Pinyin Input"}]},{"@type":"WebSite","@id":"https:\/\/www.digmandarin.com\/#website","url":"https:\/\/www.digmandarin.com\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digmandarin.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/pages\/18718","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/comments?post=18718"}],"version-history":[{"count":9,"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/pages\/18718\/revisions"}],"predecessor-version":[{"id":18728,"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/pages\/18718\/revisions\/18728"}],"wp:attachment":[{"href":"https:\/\/www.digmandarin.com\/wp-json\/wp\/v2\/media?parent=18718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}