Input
-
An input element. The
type
attribute can be used to change the input type. All text input types as well ascheckbox
andradio
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
-
How can I change the width of Input text?
-
@Liu-Xiao Apply the style you want.
style={{width: '90%'}}
-
@Liu-Xiao you can just target your element with regular CSS. What’s the problem you’re having specifically?
-
How can I enable multi-line text input?
-
@Nguyen-Truc-Minh There is some CSS for
textarea
element.
-
@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
andname
attributes for <Input>, right?
-
@samphan Yes.
-
document.getElementById('id')
doesn’t work when theinputId
is set. (TheinputId
works indeed.)
Could anyone tell me why and how to solve this… thxHere 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 aftercomponentDidMount
…? 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 thefontSize
css on the<Input>
element. The wrapper changes its size but the inner text doesn’t…
-
@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
-
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 innerinput
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> ) } }
-
@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 ;)