Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/polymer+1.4.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-tabs/paper-tabs.html">
  <link rel="import" href="paper-tabs/paper-tab.html">
  <link rel="import" href="iron-pages/iron-pages.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>
  <x-foo></x-foo>
​
  <dom-module id="x-foo">
    <template>
      <paper-material>
        <div class="editable-wrapper" on-click="_focusP">
          <h3>Awsome editor</h3>
          <p id="paragraph" contenteditable="true" on-keyup="_focus"></p>
        </div>
        <div class="input-wrapper">
         <paper-material>
          <paper-input id="input-one"></paper-input>
         </paper-material>
        </div>
      </paper-material>
    </template>
    <script>
      Polymer({
        is: 'x-foo',
        properties: {
        },
        
        _focusP: function() {
          this.$.paragraph.focus();
        },
        
        _focus: function(e) {
          console.log('should focus input 1');
          var that = this;
          if (e.keyCode === 66) {
            console.log('B pressed switch to input');
            that.$['input-one'].focus(); 
          }
          
        },
        
      });
    </script>
  </dom-module>
</body>
</html>
​
 
.editable-wrapper {
  width: 50%;
  background-color: lightgrey;
  display: inline-block;
}
​
.input-wrapper {
  width: 49%;
  background-color: lightblue;
  display: inline-block;
  
}
​
p {
  background-color: white;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers