Question

为网站制作基本联系表格。使用here

中的模板

使用这个jsfiddle： 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 */
}

在联系表格中摆脱灰色字体和文本框边框

1 个答案: