灰色のフォントとテキストボックスの境界線を連絡フォームで削除する

Question

ウェブサイトの基本的な連絡フォームを作成する。このjsfiddleを使用here

からテンプレートを使用する：私はあなたが何かを入力するためにクリックしたときにそれを取り囲んで灰色のテキストと青のブロックバーを取り除くためにどのように思っていた https://jsfiddle.net/q7mzbpof/

。連絡先フォームのテンプレートで見つけられなかったより良いオプションがある場合は、それらを取り出して実行することができます。これは私が最初に見つけられたもので、それは簡単に動作するように見えます。

function kaderValidation() 
{ 
var name1 = document.registration.fname; 
var name2 = document.registration.lname; 
var addy = document.registration.address; 
var mnum = document.registration.Mnumber; 
var mailat = document.registration.email; 

if(fname_validation(name1)) 
{ 
if(lname_validation(name2)) 
{ 
if(alphanumeric(addy)) 
{ 
if(nums(mnum)) 
{ 
if(ValidateEmail(mailat)) 
{ 
if(validsex(umsex,ufsex)) 
{ 
} 
} 
} 
} 
} 
} 
return false; 
} function fname_validation(name1) 
{ 
var name1_len = name1.value.length; 
if (name1_len == 0) 
{ 
alert("Please enter your first name"); 
name1.focus(); 
return false; 
} 
return true; 
} 
function lname_validation(name2) 
{ 
var name2_len = name2.value.length; 
if (name2_len == 0) 
{ 
alert("Please enter your last name"); 
name2.focus(); 
return false; 
} 
return true; 
} 
function alphanumeric(addy) 
{ 
var letters = /^[0-9a-zA-Z]+$/; 
if(addy.value.match(letters)) 
{ 
return true; 
} 
else 
{ 
alert('Please enter the adress in format Countrty-City-Streetnumber without spaces'); 
addy.focus(); 
return false; 
} 
} 
function nums(mnum) 
{ 
var digits = /^[0-9]+$/; 
if(mnum.value.match(digits)) 
{ 
return true; 
} 
else 
{ 
alert('Please enter your Mobile number'); 
mnum.focus(); 
return false; 
} 
} 
function ValidateEmail(mailat) 
{ 
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
if(mailat.value.match(mailformat)) 
{ 
return true; 
} 
else 
{ 
alert("Please enter a valid email address"); 
return false; 
} 

Answer 1

アクセシビリティのためにこれを行うことをお勧めしますが、単純なCSSでこれを達成できます。

input:focus { 
    outline: none; /* gets rid of the blue outline on focus */ 
} 

input:focus::-moz-input-placeholder { 
    opacity: 0; /* hides the gray plceholder text in firefox */ 
} 

input:focus::-webkit-input-placeholder { 
    opacity: 0; /* hides the gray plceholder text in Chrome/Safari */ 
}