难题，网页设计，高手指导下！

你说的问题应该是Ajax技术问题。

<div>姓名<input type="text" name="name" id="name" onblur="chk()" /><span id="ck_name"></span></div>

我以检测是否为空为例：

js函数：

function chk(){

if(trim(documentformnamenamevalue)==""){

documentgetElementById('ck_name')innerHTML="姓名不能为空";

return false;

}else{

documentgetElementById('ck_name')innerHTML="OK";

}

}

支持onfocus事件的 JavaScript 对象：

button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit,

text, textarea, window

jquery的 val() 方法可以设置或返回表单字段的值，所以清空文本框只要将其value值设为空即可。下面代码给出文本框获得焦点即清空文本的效果

$("input:text")focus(function() { // 获得焦点事件

    $(this)val("");

});

进一步，文本框获得焦点后清空内容是为了便于输入，但有时不想输入，那么失去焦点时还得恢复到原来的内容，为此还要如下代码

$("input:text")blur(function() {  // 失去焦点事件

    $(this)val()!="" || $(this)val(text);   // 如果文本框为空，那就设置之前定义的text变量值

});

下面的例子给出了包含以上内容的综合用法：

创建Html元素

<div class="box">

<span>单击文本框清空原有内容，离开文本框时若未填写内容则设置为之前的内容：</span><br>

<div class="content">

<input type="text" name="name" value="John"/>

</div>

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='text']{width:200px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}

编写jquery代码

$(function(){

var text;  // 全局变量用于保存文本框的内容

$("input:text")focus(function() {

text = $(this)val();

$(this)val("");

});

$("input:text")blur(function() {

$(this)val()!="" || $(this)val(text);

});

})

观察效果

初始状态

点击文本框后效果

没有修改内容即离开文本框则恢复原始文本

如果修改了内容，则显示修改的值

这是属性兼容问题导致的错误。

在IE和FireFox浏览器中,DOM的nextSibling方法的使用存在部分差异:

1 在FireFox中,html标记中空行和换行会被当做节点来处理,所以会出现startNodenextSibling取不到目标节点的情况,得到的元素反而是undefined或是nodeType为text的节点;

2解决方法是:判断startNodenextSibling的nodeType类型:

if(startNodenextSiblingnodeType==3)

{

brotherNode=startNodenextSiblingnextSibling; //如果浏览器是FireFox

}

else

{

brotherNode=startNodenextSibling; //如果浏览器是IE

}

<script type="text/javascript">

//循环获取所有的input框

//定义全局变量

var NI=false;

var US=false;

var PS=false;

var RPS=false;

var EM=false;

var PH=false;

//给每个input绑定获取焦点事件

//昵称

$('input[name="nickname"]')focus(function(){

$(this)next()css({color:'#979898',display:'block'});

$(this)next()html('请输入常用昵称');

});

//账户

$('input[name="username"]')focus(function(){

$(this)next()css({color:'#979898',display:'block'});

$(this)next()html('请输入6-16个字符,首字符不能为数字');

});

//密码

$('input[name="password"]')focus(function(){

$(this)next()css({color:'#979898',display:'block'});

$(this)next()html('请输入6-16个字符,首字符不能为数字');

});

//重复密码

$('input[name="repassword"]')focus(function(){

$(this)next()css({color:'#979898',display:'block'});

$(this)next()html('请再次输入密码');

});

//邮箱

$('input[name="email"]')focus(function(){

$(this)next()css({color:'#979898',display:'block'});

$(this)next()html('请输入常用昵称');

});

//电话

$('input[name="phone"]')focus(function(){

$(this)next()css({color:'#979898',display:'block'});

$(this)next()html('请输入常用手机号码');

});

//给每个input绑定丧失焦点事件

//昵称

$('input[name="nickname"]')blur(function(){

var v=$(this)val();

var reg=/^{1,16}$/;

if(!regtest(v)){

$(this)next()html('✘输入有误,请重新输入');

$(this)next()css('color','red');

}else{

$(this)next()html('✔');

$(this)next()css('color','green');

NI=true;

}

});

//账户

$('input[name="username"]')blur(function(){

var v=$(this)val();

var input=$(this);

var reg=/^\w{6,16}$/;

if(!regtest(v)){

inputnext()html('✘输入有误,请重新输入');

inputnext()css('color','red');

}else{

//发送ajax判断账户是否可用

$post('{:U("Admin/Admin/select")}',{username:v},function(data){

if(data==0){

inputnext()html('✘用户名已存在');

inputnext()css('color','red');

}else{

inputnext()html('✔');

inputnext()css('color','green');

US=true;

}

});

}

});

//密码

$('input[name="password"]')blur(function(){

var v=$(this)val();

var reg=/^[a-zA-Z]{1}\w{5,15}$/;

if(!regtest(v)){

$(this)next()html('✘输入有误,请重新输入');

$(this)next()css('color','red');

}else{

$(this)next()html('✔');

$(this)next()css('color','green');

PS=true;

}

});

//重复密码

$('input[name="repassword"]')blur(function(){

var rv=$(this)val();

var v=$('input[name=password]')val();

if(rv !== v){

$(this)next()html('✘重复密码输入有误');

$(this)next()css('color','red');

}else{

$(this)next()html('✔');

$(this)next()css('color','green');

RPS=true;

}

});

//邮箱

$('input[name=email]')blur(function(){

var v=$(this)val();

var reg = /^\w+@\w+\(com|cn|com\cn|org|hk|edu|net)$/;

if(!regtest(v)){

$(this)next()html('✘输入有误,请重新输入');

$(this)next()css('color','red');

}else{

$(this)next()html('✔');

$(this)next()css('color','green');

EM=true;

}

});

//电话

$('input[name=phone]')blur(function(){

var v=$(this)val();

var reg=/^1\d{10}$/;

if(!regtest(v)){

$(this)next()html('✘输入有误,请重新输入');

$(this)next()css('color','red');

}else{

$(this)next()html('✔');

$(this)next()css('color','green');

PH=true;

}

});

//绑定表单提交事件

$('button[name=Submit]')click(function(){

//alert('dasd');

$("input")each(function(){

$(this)next()css('display','block'); //循环让每个input框后面的span显示出来

});

//触发丧失焦点事件

$('input[name=nickname]')trigger('blur');

$('input[name=username]')trigger('blur');

$('input[name=password]')trigger('blur');

$('input[name=repassword]')trigger('blur');

$('input[name=email]')trigger('blur');

$('input[name=phone]')trigger('blur');

if(NI && US && PS && RPS && EM && PH){

return true;

}

return false;

});

</script>

onblur="checktitle()"离开事件执行的，不是点击时执行的

上面的判断可以改一下

else if($trim($("input[name=title]")val())=="")

{

请输入内容

}

文本焦点事件：

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后，产生该文件

Onchange:当文字值改变时，产生该事件

Onselect:当文字加亮后，产生该文件例：

<input type=text value=输入内容 onfocus=if(value=='输入内容') {value=''} onblur=if (value=='') {value='输入内容'} //点击时文字消失，失去焦点时文字再出现

<input type=text name=key size=12 value=关键字 onFocus=thisselect() onMouseOver=thisfocus() //鼠标移动到文本上方时，获取焦点并使文本值处选中状态

以上就是关于难题，网页设计，高手指导下！全部的内容，包括:难题，网页设计，高手指导下！、Html 选项卡获得焦点 大神看看 这是选项卡代码 但是下面是onclick事件改成onfocus 不能获得、jquery 如何实现 用户名文本框click都清空文本内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！