请问为什么效果没出来

请问为什么效果没出来

姓名:<input type="text"> <span></span>

<script type="text/javascript">

var input=document.getElementsByTagName("input")[0];

var span=document.getElementsByTagName("span")[0];

var value=input.getAttribute("value");

input.onfocus=function(){

if(value.length=0){

span.innerHTML="请输入您的姓名";

}

}

input.onblur=function(){

if(value.length=0){

span.innerHTML="请输入您的姓名";

input.setAttribute("class","red");

   }else if(value.length!==0){

span.innerHTML="";

input.className="";

}

}

</script>


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,getAttribute和直接使用属性没有太大区别,getAttribute()适用范围更广一点,可以获取自定义属性。如下:

http://img1.sycdn.imooc.com//climg/5de7549609cc2a6706040157.jpg

http://img1.sycdn.imooc.com//climg/5de754950942e9c601060030.jpg

会在后面讲到此属性:https://class.imooc.com/lesson/775#mid=19484

另,一般来说常用的可以记住,比如说input标签的type,name,id,value等。其次,可以通过控制台(按f12)查看固有属性:

http://img1.sycdn.imooc.com//climg/5de7564a09e83efc12450312.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

好帮手慕码 2019-12-03 18:00:54

同学你好,如果想在外面单独设置value值的话,应该是如下写法:

http://img1.sycdn.imooc.com//climg/5de6309d0916921004880074.jpg

http://img1.sycdn.imooc.com//climg/5de630c0092b38b704170144.jpg

因为value这个属性是input标签自带的,不需要通过getAttribute去获取。当你获取之后,这个值不是实时更新的,所以它一直是初始的空值。因此这里直接使用input.value就可以了。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 迷失的小麦 #1
    getAttribute和input.value这2种写法分别在什么情况下用?(怎么判断是不是自带的)
    2019-12-04 12:56:29
好帮手慕码 2019-12-03 15:27:27

同学你好,可以打印value看下:

http://img1.sycdn.imooc.com//climg/5de60bcf09fe6c5104190059.jpg

http://img1.sycdn.imooc.com//climg/5de60bca09b598e601130036.jpg

这里value属性,是input标签自带的,不需要获取,并且,需要通过input才能访问value属性。

建议修改如下:

http://img1.sycdn.imooc.com//climg/5de60e19099cace706940496.jpg

其次,第一次聚焦不写内容,失去焦点,再次聚焦的时候边框颜色会重叠:

http://img1.sycdn.imooc.com//climg/5de60e220958123d03770084.jpg

可优化:

http://img1.sycdn.imooc.com//climg/5de60e420977c0f403750169.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 迷失的小麦 #1
    为什么input.value不能单独var设置在外面?(效果应该和input.getAttribute("value");是一样的吧)
    2019-12-03 15:41:47
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师