How to include the autofocus HTML property into an input using ReactJS component?
I tried it with a React element that contains an input with autofocus
<input className='EI-input' autoFocus='true' tabIndex='0'
name='username' type='text'
ref='inputUser' autoComplete='on'
placeholder='email' />
But when rendering to Static Markup I don't see the autofocus property rendered in the browser (inspecting with devTools in Chrome and FireFox)
const jsx = React.renderToStaticMarkup(<InputWithAutoFocus />);
console.log(jsx); // I don't see the autofocus attribute in the input
I also tried with just autoFocus and autoFocus='on' and autofocus. None of these seem to work.
autoFocus should work, according the ReactJS docs.
This is not supported due to the interpretations of different browsers:
"We" decided not to use it because every browser has their unique interpretation of how it should work, literally all browsers do it differently. Overloading it and rendering it to the markup at the same time seems like a bad idea.
see the full thread here
Related
Creating a simple form.
Curious as to why the type='number' has different default size than type='text'?
Form looks like this. I believe with all defaults. Fiddle link below.
<form>
<label for='number' >Age:</label>
<input id='number' type='number' placeholder='Enter your age'>
<label for='name' >Name:</label>
<input id='name' type='text' placeholder='Enter your name'/>
</form>
https://jsfiddle.net/fnbkjcd3/2/
Short answer: that's just the way it is. Different browsers can - and will - implement different <input> types differently - sometimes VERY differently:
Numeric Inputs – A Comparison of Browser Defaults
MDN: input The Input (Form Input) element
MDN: input type="number"
PS:
I looked at your JSFiddle in FF and Chrome and - at least for me - the text input looked identical to the number input. I'm not sure why you're seeing them rendered "differently".
SUGGESTION:
Try to set font/size explicitly in CSS, and see if that makes a difference.
In case you didn’t know, every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. So field size may vary among browsers, see the following two screenshot:
Firefox:
Chrome:
To apply a standard stylesheet among all 'user-agent' you can use cssrest.
In HTML5 I can specify
<input class="form-control" type="url" [formControl]="homepage" >
which is of input-type url. If I use
private homepage = new FormControl();
I have my input-field but obviously no validator. To my understanding the field should be automatically validated in the browser (as HMTL5-element). But how to access the evaluation results?
<input> elements with type="url" are not supported in Internet Explorer 9 (and earlier versions), or Safari.
this is demo
https://jsfiddle.net/truonghungit/6g9Lnen8/
I have to modify a code using Struts. More precisely, I have to modify the style of some HTML inputs that are coded as <html:text> Struts tags.
So for example, I have:
<html:text name="myName" property="myProperty"
maxlength="24" size="25"
onchange="JavaScript:fooBar();" />
The inputs are actually displayed with disabled content and I would like to modify this. (The web browser I'm working on is IE 11).
EDIT:
The Struts tag actually generate this HTML :
<INPUT onchange=JavaScript:myFoo();myBar(this);
disabled="disabled"
maxLength=24
size=25
value=myValue
name=myProperty>
So it is clear that the disabled attribute is the origin of the problem but I don't know what might be the cause why Struts generates it in this case.
EDIT:
It appears that the display is different from a version of Internet Explorer to the other, for example when using IE 10, the inputs are not disabled and the disabled attribute value is an empty string (i.e. disabled="" in the HTML tag).
I am using Spring's form:input as below :
<form:input type="number" .....>
in my jsp but when I check the html that is rendered on the browser it shows like :
type="number" type="text"
i.e., two type attributes are generated in the html.
On the other hand, if I check using inspect element option in the browser, it shows correct - only type="number" as expected.
Edit- My Question: Why am I getting two type attributes in generated html (type="number" type="text") ? How to get it resolved?
Spring form:input tag doesnt have any attribute named type and the type=number used in your code belongs to html5 input tag
Also have a look at HTML Text Input allow only Numeric input
Spring form tld lists the valid attributes of form:input element here
HTML 5
with <!DOCTYPE html> has native solution:
<input type="number">
Beware that it does not behave in standard way in some browsers.
Try input type="number" to see the HTML5 version in action.
See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.
I know this is old, but i found a solution that works just fine for me.
The spring:input form tag doesnt support the type attribute and there is no such thing as spring:number.
But you can use jquery to add the type="number" attribute to the parsed html.
I used:
$(".selector").attr({
"type" : "number",
});
I noticed the following bug when using $(selector).children().attr("disabled", "disabled") where the children happened to contain a <div>.
Fiddle
<div disabled="disabled">
<input type="text" value="RAGE" />
</div>
Basic testing says FF4/Chrome enable the field. IE9 disables the field.
What is the expected behaviour?
Same for any other non form element (<input>, <select>, etc)
<div> elements do not have a disabled attribute according to the HTML specification. The expected behavior is to prevent your markup from validating correctly.
However, the new HTML5 specification allows for <fieldset> to have a disabled attribute, which disables any nested input fields. It's not widely supported yet though, so you won't be able to rely on this feature for a while.
There is no disabled attribute for the div element. So it should have no effect.