How to set placeholder value changeble - javascript

I Want placeholder value change by set interval but when i'm running my code nothing is happen.
Is there anyone who can help me.
<form>
<input type="text" placeholder="Enter E-mail" name="e-mail" id="email"/>
</form>
<script>
var holder = setInterval(function(){
var emailplaceholder = document.getElementById('email').placeholder;
if (emailplaceholder == 'Enter E-mail') {
document.getElementById('email').placeholder = 'yourmail#example.com';
document.getElementById('email').placeholder = emailplaceholder;
};
},400);
</script>

Here is a working plunkr: http://plnkr.co/edit/WFU7PGNYMcUKK180cCt7
Its possible your script was running before the dom was created or not running at all depending on when you loaded it
<input type="email" placeholder="abc#gmail.com" id="email" />
(function(){
var email = document.getElementById('email');
var interval = setInterval(function(){
email.placeholder = email.placeholder === 'abc#gmail.com' ?
'Enter email' : 'abc#gmail.com';
}, 1000);
function clearInterval(){
clearInterval(interval);
}
})();

I'm not entirely sure what the expected behaviour is, but your code is overriding the new placeholder value with the original placeholder value stored in the emailplaceholder variable.
If you want the 'yourmail#example.com' value just remove the last line of code in the setinterval function.
e.g
<script>
var holder = setInterval(function(){
var emailplaceholder = document.getElementById('email').placeholder;
if (emailplaceholder == 'Enter E-mail') {
document.getElementById('email').placeholder = 'yourmail#example.com';
// document.getElementById('email').placeholder = emailplaceholder;
};
},400);
</script>
This will set the placeholder to be: yourmail#example.com after 400ms.
If you want something else to happen, please update your post to indicate the expected functionality.

Related

create photo gallery with controlled time interval by user

I have read that lesson:
http://html.net/tutorials/javascript/lesson17.php
which contains an example:
http://html.net/tutorials/javascript/lesson17_ex1.html
but I need to create a photo gallery with possibility to choose time between photos by user, so I want to modified that line of code:
galleryStarter = setTimeout("startGallery()", 2000);
to be as user want, so I add:
<input type="text" name="name" id="name"><br>
<input type="button" id="btnSub" value="User gallery"/>
<input type="button" id="btnSub" value="User gallery"/>
also:
var btnStart = document.getElementById("btnStart");
var btnStop = document.getElementById("btnStop");
var btnSub = document.getElementById("btnSub");
btnStart.onclick = startGallery;
btnStop.onclick = stopGallery;
btnSub.onclick = userGallery;
and:
function userGallery()
{
curImage.src = preloadedImgs[counter].src;
counter ++;
if (counter == preloadedImgs.length)
{
counter = 0;
}
var c=document.getElementById("name").value;
galleryStarter = setTimeout("userGallery()", c);
window.alert(c);
isGalleryOn = true;
}
but id didn't work.. what is the reason?
It is because you didn't clear previous timer.
clearTimeout(galleryStarter);
isGalleryOn = false;
Inside function userGallery() will solved your issue.
Check Fiddle Here.

Printing or Echoing message in html page from javascript

I have the following script
function validateEmailp() {
var messagemail = document.getElementById('emailerrorz').innerText;
var two = document.getElementById('email').value;
var first = two.split("#")[1];
var badEmails = ["gmail.com", "yahoo.com"]
if (badEmails.indexOf(first) != -1) {
document.getElementById("email").value = ""; //this works
messagemail = 'We do not accept free e-mails'; //this doesn't
return false;
}
return true;
}
and HTML
<td>{EMAILFIELD}<span id="emailerrorz"></span></td>
and {EMAILFIELD} is in PHP
<input id="email" class="txt" type="text" name="email" size="25" value="" maxlength="255" onblur="validateEmailp()"></input>
But it doesn't work for me on printing the error in the span id. It only works on resetting the value from there.
When you do var messagemail = document.getElementById('emailerrorz').innerText; your variable stores a string with that content.
When you var messagemail = document.getElementById('emailerrorz'); your variable stores a object/element and then you can use the property .innerText
So use:
var messagemail = document.getElementById('emailerrorz');
// rest of code
messagemail.innerText = 'We do not accept free e-mails';
Properties don't work this way. You want:
document.getElementById('emailerrorz').innerText = 'We do not accept free e-mails'
or
var messagemail = document.getElementById('emailerrorz');
....
messagemail.innerText = etc
http://jsfiddle.net/MJXEg/

Display description in Username and Password field

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

blur event and javascript/html

I have to ask for a user's name and id number. Using event handlers such for blur or submit events and check that the user text box isn't empty and the id is a number and I have to put up an alert box if false.
Here is my html:.
<form id = "form" action = "">
<p>
<label class = "classname" for = "name">Username:</label>
<input type = "text" id = "name" placeholder = "enter your Username">
</p>
<p>
<label class = "classname" for = "idnum">ID Number:</label>
<input type = "text" id ="idnumber" placeholder = "enter id number">
</p>
</form>
and here is my Javascript code:
var helpArray = ["your doing it wrong", "your wrong"]
var helpText;
function init(){
helpText = document.getElementById("helpText");
registerListeners(document.getElementById("name"),0);
registerListeners(document.getElementById("idnumber"),0);
}
function registerListeners(object, messageNumber){
object.addEventListener( "blur",function(){
helpText.innerHTML = helpArray [0];
}, false);
object.addEventListener( "focus",function(){
helpText.innerHTML = helpArray [messageNumber];
}, false);
}
window.addEventListener("load",init,false);
as you can see I have been just trying to go by my textbook, haven't made much progress.
Instead of calling functions too many times you can use simple code like the one below.Calling functions in javascript many times may result in performance costs
window.onload = init;
function init(){
helpText = document.getElementById("helpText");
document.getElementById("name").onblur = function() {
helpText.innerHTML = helpArray [0];}, false);
}
document.getElementById("idnumber").onblur = function() {
helpText.innerHTML = helpArray [0];}, false);
}
}
you can assign functions to any events like above example, you may also use onfocus,onkeyUp..etc..

Delete default value of an input text on click

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>

Categories