I am using React Material UI and want to implement max length for a TextField component.
I tried to set max length in inputProps as below -
<TextField
id="name"
label="Name"
inputProps={{ maxLength: 5 }}
/>
This works in desktop browsers as expected, but doesn't seem to work in mobile devices browsers, expecially in most Android mobiles with Chrome latest version.
Not sure about IOS, as not tested in that environment.
Please refer the stackblitz here for reference.
To replicate, please open the above stackblitz in a mobile device browser prefebaly in Chrome.
I can go with regex, but I think setting up max length attribute to a field seems very clean and semantic.
Please let know if there is any way.
If your input filed type='number' then it will not work.
You can try this solution. I think it will work.
<TextField
onInput = {(e) =>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
}}/>
Related
Is there a known issue with TextTransform:'uppercase' with Android?
I'm fairly new to React native and just finished building views, all looked great in Ios but on Android - no button text displaying. After a series of trial and error I found that the issue seems to be textTransform:'uppercase', if I remove this from the stylesheet the text displays fine.
Has anyone experienced this? I cant find any information about the bug on the web.
This is my Code:
return (
<View style={AppStyles.buttonRect} >
<View style={AppStyles.buttonRectWrap}>
<Image style={AppStyles.buttonRectIcon} source={this.props.buttonIcon} />
<Text style={AppStyles.btnText}>{this.props.buttonTxt}</Text>
</View >
</View>
);
with a style of :
btnText:{
color:'#fff',
marginRight:14,
marginLeft:10,
fontSize:20,
alignSelf: 'center',
marginTop:-3,
textTransform:'uppercase',
},
which results in -
If I remove the transform line:
I've tried with several simulators and get the same error.
This is currently a bug with React Native. A fix appears to be in 0.59.0 release, since the 0.59.0 release candidates don't contain the bug. Source: https://github.com/facebook/react-native/issues/21966
There is a known issue. Basically using textTransform breaks text styling for android. Even textTransform: none will break your styling. Issue link: https://github.com/facebook/react-native/issues/21966
I'm facing the same issue with react native version 0.58.5, this seems to be a well known bug. Try using normal JS to capitalize strings for now:
capitalizeString = (text: string) => typeof text === 'string' && text.length > 0 && ${text[0].toUpperCase()}${text.slice(1)}
capitalizeString('mystring')
or just:
string.toUpperCase();
ref: https://github.com/facebook/react-native/issues/21966
The workaround this issue I found was to create a component that renders the props.children and chain the .toUpperCase method.
react-native text-transform uppercase
My application is ReactJS. I am using WKWebview on iOS.
I am using number format react-number-format for input.
This component not supported(type="number"). You can use only "text,tel,password" type.
<input type="number" pattern="[0-9]*"/> I can't use this.
So, I wrote the following code.
<NumberFormat id="numberFormat" decimalSeparator="," thousandSeparator="." inputMode="decimal" pattern="[0-9]*" .../>
Android device screenshot:
Its correct for me.
IOS device screenshot:
Its wrong for me.
I want to see ",(comma)" on the keyboard(decimal pad)
Kindly review and give feedback.
I solved my problem by adding the following line of code.
<NumberFormat id="numberFormat" decimalSeparator="," thousandSeparator="." inputMode="decimal" pattern="[0-9],*" .../>
But IOS Safari supporting version 12.2 or higher on inputMode="decimal" .
Thanks.
Im using
TextInput
with
keyboardType = "number-pad"
On iOS it works fine, but on Android it shows normal keyboard, how do I make android show the number-pad keyboard, and hide the "suggest" bar
On the left the iOS showing correctly, on the right the android emulator showing wrong keyboard.
<TextInput
ref="second"
style={this.state.pos > 0 ? styles.textInputStyle :
styles.textInputNormalStyle}
keyboardType = "number-pad"
maxLength={1}
value={this.state.secondVal}
onKeyPress={(event) => {this.onChange(1, event.nativeEvent.key); }}
/>
As per the docs, you need to supply keyboardType as phone-pad.
number-pad is only for IOS
For hiding the bar try autoCorrect={false}
Edit
As per the latest docs number-pad has been added for cross-platform support
for me that keyboardType='number-pad' isn't working on Android yet even though the doc says it's available cross-platform! (which is quite weird)
so my solution was just validating the value before setting it as the input value
const onChangeText = (text) => {
setInputValue(text.replace(/\D/g, ""));
};
I'm developing HTML5 app for both Android and IOS and encountering some sort of buggy issue.
What I want to achieve is to get HH:MM format of <input type="time">
According to W3C
http://www.w3.org/TR/html5/forms.html#time-state-(type=time)
Default attribute of step is 60s. This means users would never be able to select seconds without any extra attributes and The timepickers of both IOS safari(IOS7/8) and Android(jellybeans - lolipop chrome latest) works as they are expected.
The problem is that Chrome's input displays HH:MM:SS instead of HH:MM. even though SS never get any value but 00
Is there any way to remove SS part?
Edit
This issue is only on Android's Chrome.
JSfiddle : http://jsfiddle.net/yymvLk9a/
thanks in advance
I got a solution for this.
html
<input id="foo" />
js
$("#foo").on("change",function(){
$(this).attr("type","text");
});
$("#foo").on("touchstart",function(){
$(this).attr("type","time");
});
display the value as type="text" and change the type before keyboard shows up.
simple but works great for me.
EDITED
I reported this bug to google.and got confirmed and fixed.
This bug will be disappeared next update.
https://code.google.com/p/chromium/issues/detail?id=459966
If you're getting the time from MySQL you can use
$sql = "SELECT *, TIME_FORMAT(PickupTime, '%H:%i') AS PT FROM Trips WHERE TripID=".$tid;
then when filling the form
type="time" id="pickuptime" name="pickuptime" value="<?php echo $row['PT']; ?>"
This seems to present in Firefox as HH:mm without seconds
I have the following input field
<input type="number" id="zip-code" placeholder="Zip code" />
Placeholder is shown in normal browsers except android 4.0 and above and the width also get reduced compared to other fields.
What could be the error?
It's a known bug in the default Android Webkit browser. As per this QuirksMode page, you can see that many versions of Android suffer from this. Chrome for Android on the other hand, doesn't.
I've created a simple JavaScript shim (fix) for this. First, read this question How to display placeholder's text in HTML5's number-typed input, then if you still want to use a placeholder like that, checkout my solution gist.
TL;DR;
Leave your markup as you would expect;
<input type="number" placeholder="Enter some numbers" />
Then run either of these scripts after the page has loaded;
// jQuery version
$("input[type='number']").each(function(i, el) {
el.type = "text";
el.onfocus = function(){this.type="number";};
el.onblur = function(){this.type="text";};
});
// Stand-alone version
(function(){ var elms = document.querySelectorAll("input"), i=elms.length;
while(i--) {
var el=elms[i]; if(el.type=="number"])
el.type="text",
el.onfocus = function(){this.type="number";},
el.onblur = function(){this.type="text";};
}
})();
By using type = "tel' instead of type = "number" the placeholder is displayed and the numeric keyboard is opened on focus.
I had the same problem and my solution was setting the 'type' field as text. I think it happens because of the type property. Your placeholder text is not a number! If you have to force user to use only number format, you may use javascript plugins for this and i did it like that :)
try this:
<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">