Hey guys i was just wondering how to do this in a input type of text
when the user has not click the box. show "Edit Name" in the box with a slightly grey font color.
When the user clicks in the box it changes to "John Doe" and then they can edit it then submit
//EDIT
doesn't work as it already has a value set. i need the placeholder to show until clicked then the value shows
If you're using HTML5 the Placeholder attribute is the way to go.
If not just grab one of the many watermark scripts out there for jQuery or Javascript (e.g. jQuery Watermark.
EDIT
One manual way to do what you want with jQuery and CSS:
// CSS
#name{color:#ccc;}
// HTML
<input type="text" name="name" id="name" size="30" value="Edit Name" />
// jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#name').bind('focus', function() {
if ($(this).val() == 'Edit Name') {
$(this).val('John Doe').css('color', '#000');
}
});
});
</script>
Put the jQuery section in the code above into the <head> section of your HTML document and you should be good to go.
Newer browsers support the HTML5 placeholder attribute, which you can use as follows:
<input type="text" value="" placeholder="Edit Name">
For browsers that don't support it, various fallback scripts exist, which will automatically do their work if the attribute isn't supported.
Dive into HTML5 has a table of which browser versions support it natively, in case you're interested.
Related
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>
I am not so into HTML and I have the following problem into this web page: http://www.saranistri.com/saranistriWPnew/richiesta-online-di-foto-storiche/
If you open it using Chrome you can see that there are 2 date fields in which you can choose the data with its correct format (there is shown also the up and down arrows to increare or decrease the data) but if you open this page using FireFox these field are not correctly displayed (the 2 arrows are not shown and the date format is not specified).
Using FireBug I can see that these are implemented by this HTML section:
<p>
Periodo
<br>
da
<span class="wpcf7-form-control-wrap date-from">
<input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" value="" name="date-from">
</span>
a
<span class="wpcf7-form-control-wrap date-to">
<input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" value="" name="date-to">
</span>
</p>
As you can see it is specified the type="date". Why Chrome show it correctly and Firefox not? I have the same problem also using Explorer.
How can I fix this issue?
Firefox (and IE) currently do not support input type="date" yet.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Browser_compatibility
You can use a datePicker plugin at your leisure, for those browsers that don't support native html5 input date
I had the same issue with my project. You don't have to do any complicated modifications to make it work.
Simply copy and paste the code below right above your </body> tag:
<script type="text/javascript">
var datefield=document.createElement("input")
datefield.setAttribute("type", "date")
if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
}
</script>
<script>
if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
jQuery(function($){ //on document.ready
$('input[type=date]').datepicker({
dateFormat : 'yy-mm-dd'
});
})
}
</script>
This will allow you to keep using <input type=date> even in browsers that do not support HTML5 completely.
Just remember to have good placeholders in all the input field so that the user knows the format to enter the date in manually also if he chooses to.
ALSO PLEASE NOTE THE format for date here is 'yy-mm-dd' i.e it will look like this 1999-12-03. If you want to change it, make it 'dd-mm-yy' but for database applications I'd suggest you leave it as is.
Demo link:
http://elevation-inc.com/dev/test/ieform/
In IE 6/7/8 - if you enter a term into a simple input field, submit the form and then hit the back button - the input field retains the previously submitted term. If you then refresh the page, the value is also retained.
How, via HTML, can this pre-population be disabled? We want no value to be in the input box on page load/domready.
We've already tried autocomplete='off' on both the form and input element, but the pre-population is still persisting.
Thanks in advance.
<input type="text" name="userid" autocomplete="off" /> works fine for me (the same goes with your form). Make sure you reload the page in between testing (CTRL + F5 for full refresh).
This is how IE works, but you can change the value with JavaScript
<body onload="document.getElementById('q').value = '';">
<form action="http://www.google.com/search" name="f" autocomplete="off">
<input type="text" name="q" autocomplete="off" id="q"><input type="submit">
</form>
Well I guess it's a browser behaviour you can't bypass by html. You can do it in javascript however:
<script>
window.onload = function() { document.forms.f.q.value = ""; };
</script>
or if you don't want to wait for images to load (because window.onload will wait for that),
you can use the document ready event, as described here. (it needs more tweaking to make it work across all browsers)
my application working well in all browsers except IE.
In my application I have a div popup form which contains some fields. In the text box it i pressed any key it was not displaying. If i move the mouse then the entered texts are displaying actual thing is screen not refreshed
How to solve this.
mycode:
<form>
//this is popup form
<div>
<form>
<input type="text"/>
<!-- if i type in the text box in IE it is not displaying but in some pc only -->
</form>
</div>
</form>
Thanks,
If i understand correctly, you want to have a popup, containing a form. The code you pasted is just html; it does not have any of this interactivity.
Let's start with your code. It has a form with a form inside it. The form tag is used to specify the start of a web form. You can specify several thing in this tag:
action: Where will the form be posted to? e.g. send the form to http://www.example.com/processform/
method: Will the form be submitted using the GET or POST method?
Having a second form tag inside it doesn't make sense: your browser will not know where to post the form to. Most browsers will choose to use one of the two tags, but they might choose the wrong one or ignore the form tags entirely.
If you want to have a form in a popup, use an approach like following html code:
<p><span id="clickablelink">Open the form</span></p>
<div class="dialog" style="display: none;">
<form action="/process/" method="post">
<input type="text" />
<input type="submit" name="submit" value="Submit this form" />
</form>
</div>
This code part should be inside the part of your html document.
You cannot open a dialog in the same page, unless you use JavaScript, jQuery or another framework to display this form. An example of this using jQuery UI:
<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$(".dialog").dialog({
autoOpen: false
});
$("#clickablelink").click(function(){
$(".dialog").dialog("open");
});
});
</script>
This code block should be inside the part of your html document.
This is just a basic example. It might not be exactly what you are looking for. It is meant to show you in what directions you can look for your specific solution. I would suggest putting more details in your question:
For what purpose are you using this website?
What will this form be used for?
Why are you displaying a form inside a dialog?
Answering these questions and specifying your problem help you understand what you are trying to achieve and help us to answer your question properly.
You can read more about forms and javascript dialogs at the following links:
http://www.w3schools.com/html/html_forms.asp
http://mdrisser.r1designs.net/blog/?p=3
And for information about the jQuery framework:
http://www.jquery.com
http://ui.jquery.com
How to rename the browse button as "Select the file"? E.g.:
<input type=file name=browse >
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
}
function Handlechange()
{
var fileinput = document.getElementById("browse");
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>
http://jsfiddle.net/J8ekg/
The button isn't called the "browse button" — that's just the name your browser gives for it. Browsers are free to implement the file upload control however they like. In Safari, for example, it's called "Choose File" and it's on the opposite side of whatever you're probably using.
You can implement a custom look for the upload control using the technique outlined on QuirksMode, but that goes beyond just changing the button's text.
Wrap the <input type="file"> with a <label> tag;
Add a tag (with the text that you need) inside the label, like a <span> or <a>;
Make this tag look like a button;
Make input[type="file"] invisible via display: none.
A bit of JavaScript will take care of it:
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
<input type="file" id="browse" name="fileupload" style="display: none"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>
Not the nicest looking solution, but it works.
You can do it with a simple css/jq workaround:
Create a fake button which triggers the browse button that is hidden.
HTML
<input type="file"/>
<button>Open</button>
CSS
input { display: none }
jQuery
$( 'button' ).click( function(e) {
e.preventDefault(); // prevents submitting
$( 'input' ).trigger( 'click' );
} );
demo
Here is the best, simple, short and clean way to "rename" the text of an input with file type and without JQuery, with pure HTML and javascript:
<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
*The text you want*
</button>
The input type="file" field is very tricky because it behaves differently on every browser, it can't be styled, or can be styled a little, depending on the browser again; and it is difficult to resize (depending on the browser again, it may have a minimal size that can't be overwritten).
There are workarounds though. The best one is in my opinion this one (the result is here).
AFAIK you cannot change the button text, it is hard coded in the browsers.
But there are several workarounds to put a button with diferent text/image on a form:
link
No, you can't change file upload input's text. But there are some tricks to overlay an image over the button.
You can also use Uploadify, which is a great jQuery upload plugin, it let's you upload multiple files, and also style the file fields easily.
http://www.uploadify.com