html:
<div class="div-input">
<input type="text" id="loginname" name="username" value="" maxlength="25"
class="form-input" placeholder="Username"
/>
</div>
<div class="div-input">
<input type="password" id="loginpassword" name="password" maxlength="25"
class="form-input" placeholder="Password"
/>
</div>
<div>
<input type="submit" name="login" value="LOGIN" class="form-button"
onclick="return check_login("/")"
/>
<span id="logInfo"></span><span style="display: none;" id="overlay"></span>
<span style="display: none;" id="popup">
<img src="/public/images/loading.gif" />
</span>
</div>
My problem is that the placeholder is working fine in all browsers, for IE8 and IE9 I used Javascript to solve it, but in IE10 the placeholder is working, but not in a correct manner.
What happens is that on page load, if Placeholder is the placeholder, I get only Placeholde as placeholder in IE10 (last letter disappears), but if I click in the input box and outside the page it shows the correct placeholder as Placeholder.
If I type any word in the input field I am getting a cross symbol (close symbol) at the corner in the input field which is happening only in IE10.
It sounds like your javascript is breaking the native IE10 placeholder functionality.
To test this, and hopefully fix it, wrap the javascript you have written for placeholders in a conditional statement, so that it only applies to IE9 and below.
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
</script>
<![endif]-->
Alternatively, there is a very nice jquery plugin by Mathias Bynens that is available for free and handles all of this for you: https://github.com/mathiasbynens/jquery-placeholder
Some CMSs already have a plugin built using this code. The Wordpress plugin is here: http://wordpress.org/plugins/html5-placeholder-polyfill/
i am not sure about placeHolder attribute for input support in ie10,but if u want a placeholder in ie u can do this throug jquery like this below..
if(navigator.appVersion.match(/MSIE [\d.]+/)){
var placeholderText = 'Some Placeholder Text';
$('#loginname').val(placeholderText);
$('#loginname').blur(function(){
$(this).val() == '' ? $(this).val(placeholderText) : false;
});
$('#loginname').focus(function(){
$(this).val() == placeholderText ? $(this).val('') : false;
});
}
u can do same for password too..
Have U tried somewhat like this using code...i believe should work...
$('#loginname').attr('placeholder', 'username');
$('#password').attr('placeholder', 'password');
Try this, is jquery pluin for placeholder in browser that don't support perfectly it. Leaving your php code and adding this js it should work:
(function($) {
/**
* Spoofs placeholders in browsers that don't support them (eg Firefox 3)
*
* Copyright 2011 Dan Bentley
* Licensed under the Apache License 2.0
*
* Author: Dan Bentley [github.com/danbentley]
*/
// Return if native support is available.
if ("placeholder" in document.createElement("input")) return;
$(document).ready(function(){
$(':input[placeholder]').not(':password').each(function() {
setupPlaceholder($(this));
});
$(':password[placeholder]').each(function() {
setupPasswords($(this));
});
$('form').submit(function(e) {
clearPlaceholdersBeforeSubmit($(this));
});
});
function setupPlaceholder(input) {
var placeholderText = input.attr('placeholder');
setPlaceholderOrFlagChanged(input, placeholderText);
input.focus(function(e) {
if (input.data('changed') === true) return;
if (input.val() === placeholderText) input.val('');
}).blur(function(e) {
if (input.val() === '') input.val(placeholderText);
}).change(function(e) {
input.data('changed', input.val() !== '');
});
}
function setPlaceholderOrFlagChanged(input, text) {
(input.val() === '') ? input.val(text) : input.data('changed', true);
}
function setupPasswords(input) {
var passwordPlaceholder = createPasswordPlaceholder(input);
input.after(passwordPlaceholder);
(input.val() === '') ? input.hide() : passwordPlaceholder.hide();
$(input).blur(function(e) {
if (input.val() !== '') return;
input.hide();
passwordPlaceholder.show();
});
$(passwordPlaceholder).focus(function(e) {
input.show().focus();
passwordPlaceholder.hide();
});
}
function createPasswordPlaceholder(input) {
return $('<input>').attr({
placeholder: input.attr('placeholder'),
value: input.attr('placeholder'),
id: input.attr('id'),
readonly: true
}).addClass(input.attr('class'));
}
function clearPlaceholdersBeforeSubmit(form) {
form.find(':input[placeholder]').each(function() {
if ($(this).data('changed') === true) return;
if ($(this).val() === $(this).attr('placeholder')) $(this).val('');
});
}
})(jQuery);
Then you have to invoke the plugin in your php page or in another js simply by:
$(function() {
// Invoke the plugin
$('input, textarea').placeholder();
});
Hope this helps!
Related
I have written a function for placeholder functionality of an input field. It works if I write the on/off functions separately, but it's not working when keeping an input variable and if construct. Please help regarding what's wrong in syntax or logic.
function placeholder(x) {
if (x=="1") {
if (document.getElementById("search_field").value=="") {
document.getElementById("placeholder").style.display="inline";
}
}
else {
document.getElementById("placeholder").style.display="none";
document.getElementById("search_field").focus();
}
}
<input id="search_field" type="text" value="" onfocus="placeholder(0);" onblur="placeholder(1);">
<span id="field_def" onclick="placeholder(0);" >
<img src="mag.jpg">
<p id="placeholder">Search</p>
</span>
You can just use the placeholder attribute. It is accepted by all major modern browsers and will save you from adding extra HTML tags and JavaScript code.
<input type="text" name="someName" placeholder="Some Text">
Following is the alternative for old browsers where placeholder is not recognized:
DEMO
HTML:
<input id="search_field" type="text" value="Enter keywords..." onfocus="ph(1);" onblur="ph(0);" onclick="ph(1);">
JavaScript:
function ph(x) {
var txtSearch = document.getElementById("search_field");
if (x == 1) {
if (txtSearch.value == "Enter keywords...") {
txtSearch.value = '';
}
}
else {
if (txtSearch.value == "") {
txtSearch.value = 'Enter keywords...';
}
}
}
Try without the quotes on 1 when evaluating x:
function placeholder(x){
if(x==1){
if(document.getElementById("search_field").value==""){
document.getElementById("placeholder").style.display="inline";
}
}
else{
document.getElementById("placeholder").style.display="none";
document.getElementById("search_field").focus();
}
}
Also, remove the ";" when calling the function:
<span id="field_def" onclick="placeholder(0)">
Check if the function was called or not.
If not then change it:
<input id="search_field" type="text" value="" onfocus="javascript:placeholder(0)" onblur="javascript:placeholder(1)">
I'm trying to create a similar login as in https://login.microsoftonline.com/. I want to display a description "someone#example.com" and "Password" in the fields.
I've tried to use the txReplaceFormPassword.js (http://snipplr.com/view/29555/) script to dynamically replace the fields but it is returning html text instead of the actual field.
<head>
<script src="#Url.Content("~/Scripts/txReplaceFormPassword.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.pwdfield').txReplaceFormPassword({
show_text: 'Password'
});
});
</script>
</head>
<div class="pwdfield">
#Html.PasswordFor(model => model.Password, new {#class = "k-textbox", style = "width:300px"})
#Html.ValidationMessageFor(model => model.Password)
</div>
I'm getting the following output in the browser:
Please let me know how can I get a description inside Password/Username field similar to the two links above.
Thanks.
I think this is what you want:
<input type="text" placeholder="someone#example.com" /><br />
<input type="password" placeholder="Password" />
As far as I know, you don't need to use js or jQuery for that. Just set the placeholder="" to the text you want to show in the fields.
Take a look on this link.
EDIT
Then use the following jQuery (tested on ie 7):
(function($){
var placeholderIsSupported = ('placeholder' in document.createElement('input'));
$.fn.emulatePlaceholder = function(){
if(!placeholderIsSupported){
this.each(function(index, element){
var handle = $(element);
var placeholder = handle.attr('placeholder');
if(handle.val() == ''){
handle.val(placeholder);
}
handle.blur(function(e){
var handle = $(this);
if(handle.val() == ''){
handle.val(placeholder);
}
});
handle.focus(function(e){
var handle = $(this);
if(handle.val() == placeholder){
handle.val('');
}
});
});
}
};
})(jQuery);
USAGE:
$('input').emulatePlaceholder();
jsFiddle example
i have a input field for entering password in a webpage:
<input name="txtPassword" type="text" class="input2" id="txtPassword" value="Password" onfocus="txtOnFocus2('txtPassword','Password');" onblur="txtOnBlur2('txtPassword','Password');" />
in the initial state the usershould read "password" as the initial value and when he starts typing a password, the field should change to type password. Also when he sets it back to blank or initial value the field should change type to "text" and show password.
I wrote code an got it working on Firefox, Chrome, and safari and its not changing the type to password on IE 8.
this is the js code i made by editing an existing function code:
function txtOnFocus2(elementId, defaultText)
{
if (document.getElementById(elementId).value == defaultText)
{
document.getElementById(elementId).value = "";
document.getElementById(elementId).type = "password";
}
}
function txtOnBlur2(elementId, defaultText)
{
var textValue = document.getElementById(elementId).value;
if (textValue == defaultText || textValue.length == 0)
{
document.getElementById(elementId).type = "text";
document.getElementById(elementId).value = defaultText;
}
}
This is working fine in Firefox,chrome and safari but doesn't change field type on IE 8.
An alternative solution would be to change your approach altogether. The following technique degrades gracefully, is more accessible, and less JavaScript-dependant:
HTML
<div><label for="email">Email</label> <input type="text" name="email" id="email" /></div>
<div><label for="password">Password</label> <input type="password" name="password" id="password" /></div>
JavaScript
$('input')
.focus(function() {
$(this).css('background-color', 'white');
})
.blur(function() {
if($.trim($(this).val()) == '') {
$(this).css('background-color', 'transparent').val('');
}
});
CSS
input {
background-color: transparent;
padding: 2px;
}
label {
color: gray;
padding: 2px 4px;
position: absolute;
z-index: -1;
}
Live demo: http://jsfiddle.net/rjkf4/
I tried that before. There is no way to do this in IE. This is an security thing. But still you can set the value of a password input in IE. So you can remove the text input and replace it with a password input and then set the value of new input.
function replaceInput(input){
var val = input.value,
passwordInput = document.createElement('input');
passwordInput.setAttribute('type', 'password');
passwordInput.value = val;
input.parentElement.appendChild(passwordInput);
input.parentElement.removeChild(input);
};
JSFIDDLE
Instead of:
foo.type = 'password';
try:
foo.setAttribute('type', 'password');
More info: http://www.javascriptkit.com/dhtmltutors/domattribute.shtml
In IE 6 and 7 (at least) you can't change the type of an input that's already in the document. You must create a new input, set its type, then replace the one that's in the document, e.g.
var el = document.createElement('input');
el.type = 'password'
var oEl = document.getElementById(elementId);
el.id = oEl.id;
// and so on for other properties that should be copied
oEl.parentNode.replaceChild(el, oEl);
Something ugly that however should work (I don't have IE8 handy to test it) would be placing your field in a div and replacing the whole thing with container.innerHTML = "<input ...>" when needed.
try this
http://www.electrictoolbox.com/jquery-toggle-between-password-text-field/
As an option you could just fake having a visible text in the password field by using a background image with that text on it.
$(".password").focus(function(){
$(this).css("background-image", 'url(regular_bg.png)')
})
$(".password").blur(function(){
if ($(this).val() == ""){
$(this).css("background-image", 'url(bg_with_password_label_on_it.png)')
}
})
How do I empty a textfield (html form) if I click in it to write something.
Pseudo Code:
On click #searchform
Erase String in #searchform
$('#searchform').click(function() { $(this).val('') })
Try it here
$('#searchform').click(function() {
if ($(this).val() == 'Enter search term') {
$(this).data('original', $(this).val()).val('');
}
});
$('#searchform').blur(function() {
if ($(this).val() == '') {
$(this).val($(this).data('original'));
}
});
EDIT As of now you should use the placeholder attribute and if you want, use the above as a polyfill for missing placeholder support.
if (!('placeholder' in document.createElement('input'))){
$('input[placeholder]').each(function() {
$(this).placeholder();
});
}
And turn the original code into a plugin for easy use (with some small mods).
jQuery.fn.placeholder = function() {
return this.each(function() {
var value = $(this).attr('placeholder');
jQuery(this).val(value).addClass('placeholder');
jQuery(this).focus(function() {
if (jQuery(this).val() == value) {
jQuery(this).val('').removeClass('placeholder');
}
});
jQuery(this).blur(function() {
if (jQuery(this).val() == '') {
jQuery(this).val(value).addClass('placeholder');
}
});
});
};
I'd recommend you using the HTML5 placeholder attribute. For example:
<input type="text" placeholder="some default string if empty" />
This will work with most of the newest browsers and for older ones there is a workaround jQuery plugin. Here is the link to the placeholder plugin.
And then you simply call:
$('input[placeholder]').placeholder();
If you are wanting to clear a default value from a field such as "Enter Search Term" I use the following code:
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
and then on my input field I add:
onfocus="clearText(this)"
So it would be:
<input type="text" name="username" value="enter your name here" onfocus="clearText(this)">
I have an input text:
<input name="Email" type="text" id="Email" value="email#abc.example" />
I want to put a default value like "What's your programming question? be specific." in Stack Overflow, and when the user click on it the default value disapear.
For future reference, I have to include the HTML5 way to do this.
<input name="Email" type="text" id="Email" value="email#abc.example" placeholder="What's your programming question ? be specific." />
If you have a HTML5 doctype and a HTML5-compliant browser, this will work. However, many browsers do not currently support this, so at least Internet Explorer users will not be able to see your placeholder. However, see JQuery HTML5 placeholder fix « Kamikazemusic.com for a solution. Using that, you'll be very modern and standards-compliant, while also providing the functionality to most users.
Also, the provided link is a well-tested and well-developed solution, which should work out of the box.
Although, this solution works, I would recommend you try MvanGeest's solution below which uses the placeholder-attribute and a JavaScript fallback for browsers which don't support it yet.
If you are looking for a Mootools equivalent to the jQuery fallback in MvanGeest's reply, here is one.
--
You should probably use onfocus and onblur events in order to support keyboard users who tab through forms.
Here's an example:
<input type="text" value="email#abc.example" name="Email" id="Email"
onblur="if (this.value == '') {this.value = 'email#abc.example';}"
onfocus="if (this.value == 'email#abc.example') {this.value = '';}" />
This is somewhat cleaner, i think. Note the usage of the "defaultValue" property of the input:
<script>
function onBlur(el) {
if (el.value == '') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>
Using jQuery, you can do:
$("input:text").each(function ()
{
// store default value
var v = this.value;
$(this).blur(function ()
{
// if input is empty, reset value to default
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
// when input is focused, clear its contents
this.value = "";
});
});
And you could stuff all this into a custom plug-in, like so:
jQuery.fn.hideObtrusiveText = function ()
{
return this.each(function ()
{
var v = this.value;
$(this).blur(function ()
{
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
this.value = "";
});
});
};
Here's how you would use the plug-in:
$("input:text").hideObtrusiveText();
Advantages to using this code is:
Its unobtrusive and doesn't pollute the DOM
Code re-use: it works on multiple fields
It figures out the default value of inputs by itself
Non-jQuery approach:
function hideObtrusiveText(id)
{
var e = document.getElementById(id);
var v = e.value;
e.onfocus = function ()
{
e.value = "";
};
e.onblur = function ()
{
if (e.value.length == 0) e.value = v;
};
}
Enter the following
inside the tag, just add onFocus="value=''" so that your final code looks like this:
<input type="email" id="Email" onFocus="value=''">
This makes use of the javascript onFocus() event holder.
Just use a placeholder tag in your input instead of value
we can do it without using js in the following way using the "placeholder" attribute of HTML5
( the default text disappears when the user starts to type in, but not on just clicking )
<input type="email" id="email" placeholder="xyz#abc.example">
see this: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder
<input name="Email" type="text" id="Email" placeholder="enter your question" />
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
I think this will help.
Why remove value? its useful, but why not try CSS
input[submit] {
font-size: 0 !important;
}
Value is important to check & validate ur PHP
Here is a jQuery solution. I always let the default value reappear when a user clears the input field.
<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="email#abc.com" />
<script>
$("#Email").blur(
function (){
if ($(this).val() == "")
$(this).val($(this).prop("defaultValue"));
}
).focus(
function (){
if ($(this).val() == $(this).prop("defaultValue"))
$(this).val("");
}
);
</script>
I didn't see any really simple answers like this one, so maybe it will help someone out.
var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }
Here is an easy way.
#animal represents any buttons from the DOM.
#animal-value is the input id that being targeted.
$("#animal").on('click', function(){
var userVal = $("#animal-value").val(); // storing that value
console.log(userVal); // logging the stored value to the console
$("#animal-value").val('') // reseting it to empty
});
Here is very simple javascript. It works fine for me :
// JavaScript:
function sFocus (field) {
if(field.value == 'Enter your search') {
field.value = '';
}
field.className = "darkinput";
}
function sBlur (field) {
if (field.value == '') {
field.value = 'Enter your search';
field.className = "lightinput";
}
else {
field.className = "darkinput";
}
}
// HTML
<form>
<label class="screen-reader-text" for="s">Search for</label>
<input
type="text"
class="lightinput"
onfocus="sFocus(this)"
onblur="sBlur(this)"
value="Enter your search" name="s" id="s"
/>
</form>