<input type="text" name="theName" value="password"
onblur="if(this.value == ''){ this.value = 'password'; this.style.color = '#333'; this.type="text";}"
onfocus="if(this.value == 'password'){ this.style.color = '#666';}"
onkeypress="if(this.value == 'password'){ this.value = ''; this.style.color = '#000';this.type="password";}"
style="color:#BBB;" />
Like this, if the textfield is onfocus but not a thing is been written on it, the DefaultValue will be visible with a lighter color. (more like the facebook search bar)...
But id doesn't work... What did i write wrong?
Another thing that i don't get is that if i take this javascript and i put it into a tag like this:
<script type="text/javascript">
function passfocus(){
if(this.value == 'password'){this.style.color = '#666';}}
function passblur(){
if(this.value == 'password'){ this.style.color = '#666';}}
function passkey(){
if(this.value == 'password'){
this.value = ''; this.style.color = '#000';this.type="password";}}
</script>
And i call this scripts in the textfield like this:
<input type="text" name="theName" value="password" onblur="passblur()"
onfocus="passfocus()" onkeypress="passkey()" style="color:#BBB;" />
Nothing works anymore... I think i kinda messed everything up!!
Why not simply use the placeholder HTML5 attribute?
<input type="text" placeholder="Default value"/>
Related
Code:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">
Is this possible to do without putting an ID or name on this element?
Or without encasing it in an identifiable div?
To clarify, this should be the result html after the event keycode is pressed:
<input type="text" onkeydown="
if (event.keyCode == 13) { HERE, ECHO "OK" RIGHT AFTER THIS INPUT ELEMENT }
">OK
If you want to use jQuery you can do the following:
HTML
<input name="ok" type="text" id="showOK" />
JAVASCRIPT
$("#showOK").keypress(function() {
if (event.keyCode == 13){
$("<p>OK</p>").insertAfter("#showOK");
}
});
Without the Use of ID
<input type="text" onkeydown="if (event.keyCode == 13) { $('<p>OK</p>').insertAfter(this);}">
Following your requirements and trying to keep your style, you can use the insertAdjacentHTML DOM Element method to add a text just after the input element.
<input type="text" onkeydown="
if (event.keyCode == 13) { this.insertAdjacentHTML('afterend', 'OK');}
">
See demo
I used a mixture of answers here.
First off i had to create a new var:
var that = this;
Or else javascript could not find "this" somehow.
Then used the jQUery method:
$('<span>OK</span>').insertAfter(that);
Resulting in:
<input type="text" onkeydown="
if (event.keyCode == 13) { var that = this; $('<span>OK</span>').insertAfter(that); }
">
Ok, first off, don't use inline-js. But to answer your question,
<input type="text" onkeydown="
if (window.event.keyCode == 13) { this.outerHTML = this.outerHTML + 'Ok'; } "/>
DEMO
Try this:
<input type="text" onkeydown="(function(event){
var input = event.target;
if(event.keyCode == 13){
input.outerHTML += 'OK';
}
})(window.event);" />
Demo.
<input type="text" onkeydown="ok(this, event)"/>
function ok(el, event) {
var _ok = document.createElement('span');
_ok.textContent = 'ok';
if (event.which == 13) {
el.parentNode.insertBefore(_ok, el.nextSibling)
}
}
Try this:
<input type="text" onkeydown="
if (event.keyCode == 13) { this.parentNode.insertBefore(document.createTextNode('OK'), this.nextElementSibling); }
">
It will add a text node (without creating any span or div) directly after the input.
i have the code as shown below,
this is the html part.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="regi.js" ></script>
</head>
<body class="regbody">
<form align="center" method="POST" action="submit()" name="regform">
<div id="regpgdiv">
<span class="indextext">Fill in the details below to get registered! </span><br><br><br><br><br><br>
<input type="text" name="regfname" id="ip" value="Enter name" onfocus="if(this.value == 'Enter name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Enter name'; }" /> <br><br>
<input type="text" name="reguname" id="ip" value="Enter Desired Username" onfocus="if(this.value == 'Enter Desired Username') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Enter Desired Username'; }" /> <br><br>
<input type="password" name="regpwd" id="ip" value="Select Password" onfocus="if(this.value == 'Select Password') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Select Password'; }" /> <br><br>
<input type="password" name="cregpwd" id="ip" value="Re-enter Password" onfocus="if(this.value == 'Re-enter Password') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Re-enter Password'; }" /> <br><br>
<input type="submit" value="Register" id="credsub" >
</div>
</form>
</body>
and the js code is below for the Submit function
function Submit(){
var fname = document.form.regfname.value,
uname= document.form.reguname.value,
fpassword = document.form.regpwd.value,
cfpassword= document.form.cregpwd.value;
if( uname == "" || uname == "Enter Desired Username")
{
document.form.reguname.focus() ;
document.getElementById("errorBox").innerHTML = "enter the username";
return false;
}
if( fname == "" || fname == "Enter name")
{
document.form.regfname.focus() ;
document.getElementById("errorBox").innerHTML = "enter the first name";
return false;
}
if(fpassword == "" || fpassword == "Select password" )
{
document.form.regpwd.focus();
document.getElementById("errorBox").innerHTML = "enter the password";
return false;
}
if (!(cfpassword.equals(fpassword)) )
{
document.form.cregpwd.focus();
document.getElementById("errorBox").innerHTML = "doesnt match";
return false;
}
if(fname != '' && fpassword != '' && cfpassword != '' && uname!= ''){
document.getElementById("errorBox").innerHTML = "form submitted successfully";
}
}
when i click the regiter button, it says this webpage has npt been found.
i am new to javascript and need help. thanks in advance.
Yet Another Update - I realised there are errors in your Javascript code for referencing DOM objects (as well as a typo in your validation logic), below are the working modified code. In short, I have added id's to the form elements for referencing, and in your validation logic, you should be check Select Password instead of Select password.
The HTML form
<form align="center" method="POST" action="TARGET-PAGE-TO-HANDLE-DATA" name="regform" id="regform" onsubmit="return Submit()">
<div id="regpgdiv">
<span class="indextext">Fill in the details below to get registered! </span><br><br><br><br><br><br>
<input type="text" name="regfname" id="fname" value="Enter name" onfocus="if(this.value == 'Enter name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Enter name'; }" /> <br><br>
<input type="text" name="reguname" id="uname" value="Enter Desired Username" onfocus="if(this.value == 'Enter Desired Username') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Enter Desired Username'; }" /> <br><br>
<input type="password" name="regpwd" id="regpwd" value="Select Password" onfocus="if(this.value == 'Select Password') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Select Password'; }" /> <br><br>
<input type="password" name="cregpwd" id="cregpwd" value="Re-enter Password" onfocus="if(this.value == 'Re-enter Password') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Re-enter Password'; }" /> <br><br>
<input type="submit" value="Register" id="credsub" >
</div>
</form>
JS
function Submit() {
var fname = document.getElementById("fname");
var uname= document.getElementById("uname");
var fpassword = document.getElementById("regpwd");
var cfpassword= document.getElementById("cregpwd");
if (uname.value == "" || uname.value == "Enter Desired Username") {
uname.focus() ;
document.getElementById("errorBox").innerHTML = "enter the username";
return false;
}
if (fname.value == "" || fname.value == "Enter name") {
fname.focus();
document.getElementById("errorBox").innerHTML = "enter the first name";
return false;
}
if (fpassword.value == "" || fpassword.value == "Select Password" ) {
fpassword.focus();
document.getElementById("errorBox").innerHTML = "enter the password";
return false;
}
if (cfpassword.value != fpassword.value) {
cfpassword.focus();
document.getElementById("errorBox").innerHTML = "doesnt match";
return false;
}
if (fname.value != '' && fpassword.value != '' && cfpassword.value != '' && uname.value != '') {
document.getElementById("errorBox").innerHTML = "form submitted successfully";
}
return true;
}
Updated - Thanks Useless Code for the helpful suggestion, I have modified the code accordingly to use onSubmit instead of the onClick event.
Your HTML code should be:
<form align="center" method="POST" action="TARGET-PAGE-TO-HANDLE-DATA" name="regform" onsubmit="return Submit();">
The action attribute specifies the target page to handle the form data. And the onSubmit attribute specifies the Javascript function to be executed when the submit button in the form is clicked.
As already stated in a comment, onsubmit is much more appropriate in this situation. The JavaScript placed in an onclick attribute will fire when the HTML element is clicked, but for a form you actually want code that executes on submission. So:
<form align="center" method="POST" action="self" name="regform" onsubmit="Submit()">
would be closer. However, it's generally considered poor practice to use the "on" attributes to handle events in JavaScript. For one, it mixes your JavaScript with your semantic HTML, which can be make debugging harder an mixes separate concerns. But it also means that whatever you use in the "on" attributes has to be in the global scope, which can become problematic fast. Consider if you had multiple forms on the page; how would you designate the submit functions for each?
A more solid way of performing this is to put your function in an event listener, e.g.:
function Submit() {
// rest of your code here
}
document.form.regform.addEventListener('submit', Submit, false);
Here the addEventListener method takes an event type string first and a function to execute when that event occurs second. The MDN article on addEventListener has more.
ok I have default text in an input field as "password" and when a key is pressed I want it to change to the input type "password". But when I attempt this the input doesn't register my first key press but it registers all key presses after the input type switch.
function inputField(focus, inputValue, inputID){
// change inputID variable into pointer to the actual ID
var iD = document.getElementById(inputID);
// check if input has focus and handle default value changes, password field type changes, and font color changes.
if (focus == "on"){
if(iD.value == inputValue){
iD.setSelectionRange(0, 0);
iD.style.color = "#b2b2b2";
}
iD.onkeypress = function(){
if(iD.value == "password" || iD.value == "retype password"){
iD.type = "password";
}
if (iD.value != "" && iD.value == inputValue){
iD.value = "";
iD.style.color = "#000000";
}
}
}else if(focus == "off"){
if (iD.value == ""){
if(iD.type == "password"){
iD.type = "text";
}
iD.style.color = "#787878";
iD.value = inputValue;
}else if(iD.value == inputValue){
iD.style.color = "#787878"
}
}
}
<input
id = "registerPassword"
class = "loginSectionInput"
type = "text"
name = "rPassword"
value = "password"
onfocus = "inputField('on', 'password', this.id)"
onblur = "inputField('off', 'password', this.id)"
onchange = "formCheck('registerPassword')"
/>
HTML5 solves this problem for us with the placeholder attribute. No need to manage the events again...Please check some like following
<input type=password name="pwd" placeholder="Password">
You can do it in different ways, some of them are listed here! hope i have help you
Let say you have field like-
<input type="text" id="mypswfield" name="mypswfield" />
Way 1:
On onClick even, you can replace it by using Jquery,
$('#mypswfield').replaceWith('<input type="password" id="mypswfield" />')
Way 2:
$("[name=fieldname]").attr("type", "password");
(Note: This is jquery function may issue in old IE so careful)
Way 3:
Create function
function txtField()
{
if(document.getElementById('mypswfield').value=='')
{
document.getElementById('mypswfield').type='text';
document.getElementById('mypswfield').value='Password';
}
}
function txtPawd()
{
document.getElementById('mypswfield').type='password';
document.getElementById('mypswfield').value='';
}
HTML
<input id="mypswfield" onclick="txtField();" onblur="txtPawd();" name="mypswfield" type="text" value="Password">
show you an example：
<html><head><script>function swithch(){
alert("myText is ");
var myText=document.getElementById("myId");
alert("myText is "+myText);
alert("myText is type "+myText.type);
alert("myText is value "+myText.value);
myText.type='text';
myText.value='56789';
}</script></head><body>
TT <input type="password" name="myText" id="myId" value="123456"/> <input type="button" name="switch" value="swithch" onclick="swithch()">
this code have been tested at google chrome.
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>
I have an input text field, which has a value "something" by default, but when I start to type, I want that the default value changes color, and the text i'll type, another one.
How can i do that?
<input type="text" value="something" onclick="this.value=''" />
To keep it simple like your example:
<input type="text" value="something" onclick="this.value='';this.style.color='red';" />
And that should pretty much do it.
You may want to try the following:
<input type="text" value="something"
onFocus="if (this.value == 'something') this.style.color = '#ccc';"
onKeyDown="if (this.value == 'something') {
this.value = ''; this.style.color = '#000'; }">
Going off #chibu's answer, this is how you would do it using jQuery and unobtrusive Javascript
$(document).ready(
function() {
$("#mytext").bind(
"click",
function() {
$(this).val("");
$(this).css("color", "red");
}
);
}
)
// 'run' is an id for button and 'color' is for input tag
// code starts here
(function () {
const button = document.getElementById("run");
button.addEventListener("click", colorChange);
function colorChange() {
document.body.style.backgroundColor = document.getElementById("color").value;
}
})();
Here we go:
<input type="text" value="something" onclick="this.value='';this.style.color='red';" />
Best of luck!
Keep coding!