If the below code was opened in firefox 20.0.1 and type some value in the text box. once after typing the value hit the browser refresh button. the typed value getting shifted from one input elelment to another.
<html>
<head>
<script>
function searchPageLoader(){
document.getElementById('searchareaa').innerHTML='<label ></label>';
}
</script>
</head>
<body onload="searchPageLoader()">
<div id="searchareaa"></div>
<input type="text" id="pageCount" value="5"/>
<input type="text" id="startlimit" value="11"/>
<input type="text" id="endlimit" value="5"/>
</body>
</html>
It is happening only in firefox and and only if we do the innerhtml . What is the work around for this, as it is spoiling most of the application workflow.
If you surround the form controls (including the div with the new label) with <form></form> tags, this strange behavior disappears. See https://support.mozilla.org/questions/959372
Related
I have a form and an input outside of the form. The input is linked to the form.
I have tested this on Chrome and it works but on IE it does not.
Is this a known bug? Is there a link to the bug? PS: I don't need a solution I just need a confirmation that only IE behaves like this and perhaps a page where the bug is described or maybe a page where it says that it is function as design.
UPDATE
The bug that I am referring is this: When you enter some text on this input and press enter key I would expect for the form to submit. (as state previously on chrome it works as expected while on IE it does not)
Here is a code: go to the second input and press enter: In Chrome/Firefox/Opera the message submit called is displayed while in IE/Edge it does not.
function submitForm(e) {
alert('Submit called');
e.stopPropagation();
e.preventDefault();
return false;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form onsubmit="submitForm()" id="bugForm">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
<input type="text" name="another" id="another" form="bugForm" />
</body>
</html>
You did not posted your sample code, So we cannot accurately say what you are doing in your code and why it is not working in IE.
If we assume like you have any input tag outside your form and you want to submit a form by pressing enter key on that input control than it should not submit the form because it is not inside the form tag. In that way IE is working correctly and it should not consider as a bug.
If you have a requirement to do that than you can try to refer an example below will work with IE.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form action="something.php">
<input type="text" name="name" />
<input id="submitButton" type="submit" value="submit" />
</form>
<hr>
You can click this ->
<label for="submitButton">Submit</label><br>
Or You can click ->
<input type="submit" onclick="document.forms[0].submit();" />
</body>
</html>
For Reference, You can refer links below.
(1) Form not working in Internet Explorer
(2) Submit form using a button outside the tag
I found a page where indeed an input outside of a form is not supported (HTML5).
http://html5test.com/
I am using HTML form validation and have discovered a strange issue within IE11. The problem does not appear in Chrome, Firefox, Opera or Edge.
Basically, IE11 does not appear to perform a form reset correctly. I would expect a form reset to clear all validation errors and reset the form values back to their initial values. On the next submit, I would expect the form to re-validate.
What appears to happen during a form reset is only values are reset - validation error states (or even a successful validation) seem to remain unless a user changes the field.
The only workaround I can see for my web app is to reload the page rather than perform a form reset. Any other ideas?
The workflow is as follows:
Using IE11, remove the text from a required input field.
Click Submit, get validation error.
Click Reset, input field value returns to initial value.
Click Submit, get validation error yet the field has been filled in using the initial value.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" value="test" required>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
I am able to produce the issue but unfortunately no any solution is available for this specific issue.
You can try to use work around like first setting the textbox value to empty and then reset the form using JS.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function resetfrm()
{
document.getElementById("txt1").value='';
document.getElementById("theForm").reset();
alert("clear");
}
</script>
</head>
<body>
<form id="theForm" name="theForm">
<input type="text" name="textBox" id="txt1" value="test" required>
<input type="submit">
<input type="button" onclick="resetfrm()" value="Reset">
</form>
</body>
</html>
import React from 'react';
import { render } from 'react-dom';
const App = () => (
<input
type="number"
min={0}
max={99999}
step={1}
/>
);
render(<App />, document.getElementById('root'));
If i focus the input box and enter a number, I'm able to change the number by using the mouse scroll wheel while hovered over the input box.
However, when I create a .html file with the following content, I'm not able to change the number via scrolling. Any idea what's the reason?
<!DOCTYPE html>
<html>
<body>
<input
type="number"
min={0}
max={99999}
step={1}
/>
</body>
</html>
Looks like the scrolling behavior depends on whether there is an onWheel handler or not. When rendering two inputs on a page there is a difference:
<input id="input1" type="number" min="0" max="99999" step="1">
<input id="input2" type="number" min="0" max="99999" step="1" onwheel="">
Here input2 increments/decrements its value on mouse wheel, but input1 doesn't.
Since React attaches its own event handlers to dom elements, inputs are enabling this increment on mouse wheel feature and behave differently comparing to a plain HTML page.
<!DOCTYPE html>
<html>
<body>
<input
type="number"
min=0
max=99999
step=1
/>
</body>
</html>
I am not sure where you tried the .html but it seem to have the same behaviour on scroll. Check the codepen link.
https://codepen.io/nandukalidindi/pen/WXpgwr
However when I tried to render the .html on my local chrome browser, the scroll was not working and same with the React. Neither of them responded to scroll on local browser. I am not sure how the environments differ.
Bracket syntax is not valid HTML. They're used in JSX to insert javascript code inside HTML syntax, but obviously that will not work in pure HTML.
The equivalent HTML would be:
<!DOCTYPE html>
<html>
<body>
<input
type="number"
min="0"
max="99999"
step="1"
/>
</body>
</html>
Working example
Note that in both cases (React and HTML), the input needs to have focus for scrolling to work. This ability to scroll might also be a browser-dependent behavior.
Also, note that if you inspect the HTML that's being output by your React example, you'll see the same HTML that I've written above, so this is definitely not a behavior specific to React.
I was having this problem with a more complex chunk of code, so I started messing with a html "joke" with the movie The Seven, and realized it was the same problem. Why doesn't it do anything when I click the button? I've tried it adding a function and script as well, get same problem. I want it to show the text inside the (formerly blank) input box when you click the button.
<html>
<body>
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').innerHTML='head of gwyneth paltrow';">
</body>
</html>
innerHTML, as the name suggests, refers to the HTML content of an element. You need to use value
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').value='head of gwyneth paltrow';">
See it in action
I have a textbox that has a piece of text in it already so users know what is supposed to go in it. I've already set it up so clicking on it selects all the text. What I want to know if how I can make it so clicking on the textbox will clear all the text. Likewise, if the user deletes everything they wrote, how can I make the original text appear?
A perfect example of what I want to do is the textbox for the title when asking a question here on Stack Overflow.
With the code below you can simply add the class "clear" to any input element or textarea and it will clear the initial value!!!
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
<script>
$(function() {
$('.clear').one('focus', function() {
this.value = '';
});
});
</script>
</head>
<body>
<input type="text" value="Full Name" class="clear"/> <br />
<input type="text" value="Email" class="clear"/> <br />
<textarea value="About you..." class="clear"></textarea>
</body>
</html>
Fast and dirty, but does the job:
<input type="text" value="init..." onfocus="this.value=''; this.onfocus=null;" />
Update:
Since my answer in 2011 input placeholder became a common thing, so the proper solution is:
<input type="text" placeholder="init..." />
The textarea you created should have an id associated with it in the tag. The text area id would look something like this:
<textarea id="someId"...>
Where "someId" would be whatever name you give to it. Then when you use the following code
document.getElementById('someId').value = '';
it will replace the text in the box with the text specified by the function above. In this case, it will replace it with no text. Just make sure it only does this once, otherwise, when you click outside of the box, and then click inside of it again, the user's input will still be erased as well.