{"id":14963974,"url":"https://github.com/azerion/phaser-input","last_synced_at":"2025-12-12T03:49:41.460Z","repository":{"id":57134127,"uuid":"51357492","full_name":"azerion/phaser-input","owner":"azerion","description":"Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.","archived":false,"fork":false,"pushed_at":"2019-03-25T10:05:26.000Z","size":349,"stargazers_count":204,"open_issues_count":19,"forks_count":64,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-10-30T00:42:54.422Z","etag":null,"topics":["inputfield","keyboard","keyboard-events","phaser","phaser-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/azerion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-09T09:31:19.000Z","updated_at":"2024-10-21T02:34:54.000Z","dependencies_parsed_at":"2022-08-31T04:10:15.064Z","dependency_job_id":null,"html_url":"https://github.com/azerion/phaser-input","commit_stats":null,"previous_names":["orange-games/phaser-input"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azerion%2Fphaser-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azerion","download_url":"https://codeload.github.com/azerion/phaser-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247419860,"owners_count":20936012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inputfield","keyboard","keyboard-events","phaser","phaser-plugin"],"created_at":"2024-09-24T13:32:24.993Z","updated_at":"2025-12-12T03:49:36.406Z","avatar_url":"https://github.com/azerion.png","language":"TypeScript","readme":"Phaser Input\n============\nPhaser Input is a plugin for Phaser that allows you to use html input fields as Phaser object inside your Phaser game. It fills the blanks of CanvasInput (that only works on a canvas renderer) and appends it with full Phaser support!\nThe best part is that it will also work on mobile devices!\n\nKey features:\n\n* Works on mobile and Desktop\n* Included TypeScript support\n* Also runs under WebGL renderer\n* Pure Phaser implementation\n* Easy configurable\n* Production hardened\n\n*Imporant*\nFrom here on this library will be published and updated under [@azerion/phaser-input](https://www.npmjs.com/package/@azerion/phaser-input) at NPM, the old [phaser-input](https://www.npmjs.com/package/phaser-input) will no longer be maintained.\nIf you are comming from v1 you can read the migration guide at the bottom\n\nGetting Started\n---------------\nFirst you want to get a fresh copy of the plugin. You can get it from this repo or from npm, ain't that handy.\n```\nnpm install @azerion/phaser-input --save-dev\n```\n\nNext up you'd want to add it to your list of js sources you load into your game\n```html\n\u003cscript src=\"node_modules/@azerion/phaser-input/build/phaser-input.js\"\u003e\u003c/script\u003e\n```\n\nAfter adding the script to the page you can activate it by enabling the plugin:\n```javascript\ngame.add.plugin(PhaserInput.Plugin);\n```\n\nUsage\n-----\n### Adding a InputField\nThe simplest way of adding a input field is:\n```javascript\nvar input = game.add.inputField(10, 90);\n```\n\nOfcourse there are options available that can be used to style the input. They can be passes as an object as the third parameter.\n\n```javascript\nvar password = game.add.inputField(10, 90, {\n    font: '18px Arial',\n    fill: '#212121',\n    fontWeight: 'bold',\n    width: 150,\n    padding: 8,\n    borderWidth: 1,\n    borderColor: '#000',\n    borderRadius: 6,\n    placeHolder: 'Password',\n    type: PhaserInput.InputType.password\n});\n```\n\n### Using zoom\nZooming is easy to enable on an input field, it can be passed to the InputField as a setting. But there are some caveats:\n\nFirst of all, it's only meant for mobile. Second; it modifies the scale and pivot of the world, and that might interfere with your resize.\n\nAlso, when the keyboard is shown, sometimes a resize event will be triggered.\n\nIdeally you use a custom resize event, check for the static property `PhaserInput.KeyboardOpen` and don't resize when it's set to true.\n\n### Using keyboard open/close signals\nCurrent version includes two event dispatchers that notify when a device keyboard is opened or closed.\n\nYou can add listeners which trigger events based on this feedback.\n\n```javascript\nPhaserInput.onKeyboardClose.addOnce(function() {\n    this.resizeBackgroundImage();\n});\n```\n\n### Capture input events\nBy default, input event will not bubble up to other elements\nThis is controlled by an InputField property called `blockInput`.\nWhen set to false, the input event will trigger on the input element and move up to other elements listening for the event.\n\ne.g. An in-game sprite might be listening for keyboard events (W, A, S, D).\nIf set to false, typing in input field will not trigger keyboard events for the sprite.\nSo the sprite will not move when typing into input field.\n\n\n### Toggle Enter key\nInputField has a property (`focusOutOnEnter`) that controls whether the input field will lose focus on pressing Enter.\nIf set to true, pressing enter will end focus on the field (default is true).\n\n\n### Current Limitations\n - Updates are slow when typing fast (type slower you!!)\n - Zoom modifies the pivot and scale of the world, so it might interfere with some stuff\n\n## Properties\n - **x**: number (0 by default) The X-coordinate in the game\n - **y**: number (0 by default) The Y-coordinate in the game\n - **fill**: string (#fff by default) The color of the inputted text\n - **fillAlpha**: number (1 by default) Alpha of the textbox, 0 will hide the textbox and only show the text/placeholder/cursor\n - **width**: number (150 by default) The width of the text box (just like in the DOM, padding, borders add onto this width)\n - **height**: number (14 by default) The height of the text box (just like in the DOM, padding, borders add onto this height)\n - **padding**: number (0 by default) The padding in pixels around all 4 sides of the text input area.\n - **borderWidth**: number (1 by default) Size of the border\n - **borderColor**: string (#000 by default) Color of the border\n - **forceCase**: ForceCase (none by default) If we should force a certain case (either PhaserInput.ForceCase.upper or PhaserInput.ForceCase.lower)\n - **borderRadius**: number (0 by default) Create rounded corners by setting a border radius\n - **placeHolder**: string ('' by default) Text that will be shown before the user input's anything\n - **placeHolderColor**: string (#bfbebd by default) The color of the placeholder text\n - **type**: InputType (text by default) Either text, password or numeric\n - **backgroundColor**: string (#fff  by default) The background color of the input box\n - **cursorColor**: string (#000 by default) The color of the blinking cursor\n - **font**: string (14px Arial by default) The font that is used for the input box, covers the input text, placeholder and cursor\n - **min**: string (none by default) The minimum number for the input field, only for number input fields\n - **max**: string (none by default) The maximum number for the number input field, or the maxLength for other input fields\n - **selectionColor**: string (rgba(179, 212, 253, 0.8) by default) The default color for the text selection highlight.\n - **zoom**: boolean (false by default) if we need to  zoom onto the input field (mobile only).\n\n### Browser Support\nTested on:\n - Desktop\n  * Chrome 48+\n  * FireFox 44+\n  * Safari 9+\n - Mobile\n  * Chrome 48+\n  * iOS 9+\n\nMigrating from v1\n-----------------\nthe API of the objects is the same as before but the namespace changed. We decided to remove the Fabrique namespace, and house the plugin in it's own (PhaserInput).\nso:\nFabrique.Plugins.Input\nbecomes:\nPhaserInput.Plugin\n\nand all other references of Fabrique.Plugins can be replaced with PhaserInput.\nIf you are still unsure how or what, both the example and this readme have been adjusted to work with the new namespace.\n\nFAQ\n---\n### I Don't see the cursor blinking!\nThis is most likely due to you adding the input field to a custom Phaser object. According to the [Phaser docs](http://phaser.io/docs/2.6.2/Phaser.Sprite.html#update) the update function needs to be called manually in these cases.\n\nSo add the following to your object and the cursor should work :)\n\n```javascript\nupdate: function () {\n    this._inputField.update();\n},\n```\n\n### How do I focus on the element?!\nNormally the element is only focused trough user interaction (due to mobile limitations) you can get around this by manually calling the focus method yourself:\n```javascript\nvar input = game.add.inputField(10, 90);\n//start with focus on the element\ninput.startFocus();\n\n//and then end the focus\ninput.endFocus();\n```\nPlease note that this will not work on mobile wihtout a  user interaction\n\n### Can I change the width later on in the code?\nWell thanks for asking, yes you can!\n```javascript\nvar input = game.add.inputField(10, 90);\ninput.width = 200;\n```\n\n### Well then, is it also possible to set the value in code?\nYes you can! The Inputfield has a setText function you can call to set any value you want!\n```javascript\nvar input = game.add.inputField(10, 90);\ninput.setText(\"My custom text\");\n```\n\nCredits\n-------\nphaser-input is inspired by [CanvasInput](https://github.com/goldfire/CanvasInput)\n\nDisclaimer\n----------\nWe at Azerion just love playing and creating awesome games. We aren't affiliated with Phaser.io. We just needed some awesome input boxes in our awesome HTML5 games. Feel free to use it for enhancing your own awesome games!\n\nPhaser Input is distributed under the MIT license. All 3rd party libraries and components are distributed under their\nrespective license terms.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazerion%2Fphaser-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazerion%2Fphaser-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazerion%2Fphaser-input/lists"}