Input

[OnsenUI]

An input element. The type attribute can be used to change the input type. All text input types as well as checkbox and radio are supported. The component will automatically render as a Material Design input on Android devices. Most attributes that can be used for a normal <input> element can also be used on this element.

Click here to see the original article

[Liu Xiao]

How can I change the width of Input text?

[Fran Diox]

@Liu-Xiao Apply the style you want. style={{width: '90%'}}

[misterjunio]

@Liu-Xiao you can just target your element with regular CSS. What’s the problem you’re having specifically?

[Nguyen Truc Minh]

How can I enable multi-line text input?

[Fran Diox]

@Nguyen-Truc-Minh There is some CSS for textarea element.

[Nguyen Truc Minh]

@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/

[samphan]

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?

[munsterlander]

@samphan Yes.

[Songkeys]

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]

@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…

[misterjunio]

@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

[Fran Diox]

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

[Songkeys]

@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>
    )
  }
}

[misterjunio]

@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 ;)