{"action":"created","issue":{"url":"https://api.github.com/repos/atom/atom/issues/6412","labels_url":"https://api.github.com/repos/atom/atom/issues/6412/labels{/name}","comments_url":"https://api.github.com/repos/atom/atom/issues/6412/comments","events_url":"https://api.github.com/repos/atom/atom/issues/6412/events","html_url":"https://github.com/atom/atom/issues/6412","id":69058329,"number":6412,"title":"attaching the '.native-key-bindings' class to an <input> element has no effect on keyboard input","user":{"login":"jonathanjibo","id":11726733,"avatar_url":"https://avatars.githubusercontent.com/u/11726733?v=3","gravatar_id":"","url":"https://api.github.com/users/jonathanjibo","html_url":"https://github.com/jonathanjibo","followers_url":"https://api.github.com/users/jonathanjibo/followers","following_url":"https://api.github.com/users/jonathanjibo/following{/other_user}","gists_url":"https://api.github.com/users/jonathanjibo/gists{/gist_id}","starred_url":"https://api.github.com/users/jonathanjibo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonathanjibo/subscriptions","organizations_url":"https://api.github.com/users/jonathanjibo/orgs","repos_url":"https://api.github.com/users/jonathanjibo/repos","events_url":"https://api.github.com/users/jonathanjibo/events{/privacy}","received_events_url":"https://api.github.com/users/jonathanjibo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-04-17T04:09:33Z","updated_at":"2015-04-27T02:35:37Z","closed_at":null,"body":"When creating an input element with class native-key-bindings `<input class=\"native-key-bindings\"...` of type `text` or `number`, the key bindings don't act natively.\r\n\r\nFor anyone else that's run into this problem, I've gotten around this by not using input types that require keyboard input and instead, use a div with the contenteditable attribute and some styling. For example\r\nHTML:\r\n```\r\n<div class=\"input-div native-key-bindings\" contenteditable>Hello Foo</div>\r\n```\r\nCSS to make it look like a native input text field:\r\n```\r\n.input-div {\r\n  background-color: white;\r\n  border: 1px solid darkgray;\r\n  box-shadow: 1px 1px 1px 0 lightgray inset;\r\n  font: -moz-field;\r\n  margin-top: 5px;\r\n  padding: 2px 3px;\r\n  width: 100%;\r\n  height: 25px;\r\n}\r\n```\r\n\r\nTo make it a single line field add\r\n```\r\n[contenteditable=\"true\"].input-div {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n}\r\n[contenteditable=\"true\"].input-div br {\r\n  display:none;\r\n\r\n}\r\n[contenteditable=\"true\"].input-div * {\r\n  display:inline;\r\n  white-space:nowrap;\r\n}\r\n```\r\n\r\nIt would be great to be able to support input elements."},"comment":{"url":"https://api.github.com/repos/atom/atom/issues/comments/96478187","html_url":"https://github.com/atom/atom/issues/6412#issuecomment-96478187","issue_url":"https://api.github.com/repos/atom/atom/issues/6412","id":96478187,"user":{"login":"lee-dohm","id":1038121,"avatar_url":"https://avatars.githubusercontent.com/u/1038121?v=3","gravatar_id":"","url":"https://api.github.com/users/lee-dohm","html_url":"https://github.com/lee-dohm","followers_url":"https://api.github.com/users/lee-dohm/followers","following_url":"https://api.github.com/users/lee-dohm/following{/other_user}","gists_url":"https://api.github.com/users/lee-dohm/gists{/gist_id}","starred_url":"https://api.github.com/users/lee-dohm/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lee-dohm/subscriptions","organizations_url":"https://api.github.com/users/lee-dohm/orgs","repos_url":"https://api.github.com/users/lee-dohm/repos","events_url":"https://api.github.com/users/lee-dohm/events{/privacy}","received_events_url":"https://api.github.com/users/lee-dohm/received_events","type":"User","site_admin":false},"created_at":"2015-04-27T02:35:37Z","updated_at":"2015-04-27T02:35:37Z","body":"I'm pretty sure that it requires both `class='.native-key-bindings'` and `tabindex=-1`:\r\n\r\nhttps://discuss.atom.io/t/simple-way-to-get-copy-working-on-my-own-pane-item/16131/7?u=leedohm"}}