I have an HTML input as follows:
<input type="text" value="Link etc..." readOnly={true}/>
I am trying to make the text inside the input to be auto highlighted at the point the input is displayed on the page.
I have found lots of questions that show how to do this onClick etc, but none that highlight the text by default when the input displays.
I am sure this is a simple task - but I cannot find the answer anywhere!!
NOTE: I am sure I could work out how to achieve this by firing a JavaScript function on my page - but this seems a bit of overkill - I am trying to achieve this in the HTML declaration
I am also using React - but I do not think this is relevant for this question?
AFAIK there is no default feature which highlight an input text when it's active in HTML. You will need to use some Javascript.
I can recommand you to check out this StackOverflow question which provides a simple and pretty efficient code:
<input type="text" name="textbox" value="Test" onclick="this.select()" />
N.B: In a UX point of view, highlight by default an input text on click can be a bad idea. If the user typed something and wants to modify his input, it will hightlight and he will need tu use the keyboard arrows to change the cursor position. Be carefull with this feature.
You could also do this with jQuery using document.ready if you wanted the box to always be selected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text" name="textbox" id="textbox" value="Test" />
<script>
$(document).ready(function(){
var autoselect = document.getElementById('textbox');
autoselect.select();
});
</script>
Related
Hello guys I wanted to know that is there a way to tell a input box to append something at the start
<input type="text" label="false" placeholder="Article Source URL" name="url" id="7TkwumNLSSXC9hJ7d" data-schema-key="url" required="" pattern="https?://.+">
in it we are telling it the pattern but is there a way that a input box always append https:// at the start without using jquery ??
No.
You can use the value attribute to give it a default value of http://, but HTML provides nothing that would change its value automatically if that was removed.
You can do that with JavaScript (adding it on blur or when the form is submitted, for example) and libraries like jQuery can make that simpler.
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
I have a form in html (generated in php), which contains also a text field.
To submit the form I use a submit button and the results appear on the left side of the page. Now, I would like to add another button which would clean the text in the text field
and resubmit the form (with value="" in the text field). Do you have any idea how to do it?
Simple <input type="reset"> does not submit the form.
your button should be like this:
<input type="button" onclick="DeleteText();" value="Delete text" />
and your javascript code:
function DeleteText() {
document.getElementById('my_text_input_id').value = '';
document.getElementById('my_form_id').submit();
}
suppose the text box has id="myText" and the new button has id="clearBtn", and the form has id=myForm. You can do the following:
$(#clearBtn).on("click",function() {
$('#myText').val("");
document.forms["myForm"].submit();
})
This is untested, but proposes an idea. Also, This is a jquery solution, which I recommend over pure javascript in most cases.
HTML5 brings us the "placeholder" attribute, which allows for a Pure CSS implementation of this.
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
I have successfully used Shidhin's solution, found here:
http://codepen.io/shidhincr/pen/ICLBD
Can you guys tell me how to show textarea cursor automatically? Usually when i click on textarea i have an text cursor. Is there any possibility to show it straightaway?
Set the autofocus attribute on the control. Note that this requires a browser that supports that particular bit of the HTML 5 draft.
<textarea rows="4" cols="30" autofocus></textarea>
It is also possible to set it with JavaScript, but that can interfere with normal use of the page (especially with screen readers which use the focus point to read from) (so can the autofocus attribute, but it is at least standard so screen reader software can be written to work around it).
The JavaScript technique I don't recommend is:
<textarea rows="4" cols="30" id="mytextarea"></textarea>
<script> document.getElementById('mytextarea').focus(); </script>
Note that this does not use the onload event. That event doesn't fire until the entire document, including dependancies such as images, is loaded so there is usually a significant delay in which the user might start interacting with the page. Setting the focus after that point is likely to break whatever the user is in the middle of.
You can set the focus. If you dont use any external libraries (like jQuery) try this:
<body onload="document.yourForm.yourTextarea.focus();">
<form name="yourForm">
<textarea name="yourTextarea"></textarea>
</form>
</body>
You can give focus to that textbox while loading page
It is HTMLElement called focus() method.
Here's the link with an example: http://www.w3schools.com/jsref/met_html_focus.asp
Use This Code: <textarea rows="20" cols="100">
Your HTML Code:
<textarea>
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.