Input



  • @Fran Diox: Thank you, but that textarea css is not consitent with meterial style so I created new component my self at http://vulcandemy.com/2017/06/27/react-onsenui-auto-grow-textarea/



  • Most attributes that can be used for a normal <input> element can also be used on the <ons-input> element…

    This means I can set id and name attributes for <Input>, right?



  • @samphan Yes.



  • document.getElementById('id') doesn’t work when the inputId is set. (The inputId works indeed.)
    Could anyone tell me why and how to solve this… thx

    Here is my code:

    export default class InputDemo extends Component {
      componentDidMount() {
        console.log(document.getElementById(('input1')));// null
      }
      render() {
        return(
            <div>
              <Input inputId="input1" />
            </div>
        )
      }
    }
    

    The interesting thing is that i can get this work by typing document.getElementById(('input1') in the browser console.
    So i guess the id is set after componentDidMount…? So strange…



  • @songkeys:
    Additionally, the reason why i try to target the inner <input> element is that i wanna set the font-size in the input box.
    You can try to specify the fontSize css on the <Input> element. The wrapper changes its size but the inner text doesn’t…


  • Onsen UI

    @Songkeys not sure why but it seems like the DOM is not ready in your componentDidMount hook, can you try doing the same log on click of a button? I will have a look later at why that is happening, in principle I think it should work like you did


  • Onsen UI

    It’s probably better if you just apply it as a CSS class: .myClass input { font-size: ... } or #input1 { ... }.



  • @misterjunio:
    Hey!
    The click of a button works. So I think it probably because the inner input element is rendered after all the other DOM is ready…?

    export default class InputDemo extends Component {
      componentDidMount() {
        console.log(document.getElementById(('input1')));// null
      }
    
      log(){
        console.log(document.getElementById(('input1')));// works fine
      }
    
      render() {
        return(
            <div>
              <Input inputId="input1" />
              <button onClick={this.log}>Log</button>
            </div>
        )
      }
    }
    

  • Onsen UI

    @Songkeys not after but it is indeed part of the DOM rendering. You can do what @Fran-Diox suggested or if you really want to use that hook you can wait for page init, when everything is already set up:

    componentDidMount() {
      document.getElementById('yourPageId').addEventListener('init', function (event) {
        console.log('input initialized', document.getElementById('input1'));
      })
    }
    

    Be careful with the extra parenthesis in your logs ;)


Log in to reply