input输入框判断3中写法

1、新建html文档。

2、书写html。

<input name="" type="text" value="姓名" onfocus="if(this.value=='姓名'){this.value=''}" onblur="if(this.value=='') {this.value='姓名'}"/>

<br /><br />

<input name="" type="text"  value="" placeholder="目的地" >

<br /><br />

<input type="text" class="text" value="请输入您要查询的内容" onfocus="if(this.value == '请输入您要查询的内容')this.value=''" onblur="if(this.value == '')this.value='请输入您要查询的内容'" name="word">

<br />

3、书写css样式。

<style>

* { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; outline: 0; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent }

body { margin:0; padding:0; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px;color: #000; background-color: #fff;-webkit-text-size-adjust:none; padding:20px;}

div,form,img,ul,ol,li,p,dl,dt,dd { margin: 0; padding: 0; border: 0;}

h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-family:'\5FAE\8F6F\96C5\9ED1';font-weight:normal;font-size:14px;}

address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal;}

fieldset, img, input { border: 0 none;}

table{border-collapse: collapse; border-spacing: 0;}

ul,li {list-style:none;}

i,em{ font-style:normal;}

fieldset,img{border:0px;}

textarea { resize: vertical }

a {text-decoration:none; color: #007aff }

a:focus { outline:0;}

a:hover{text-decoration:none;}

a:active { color:red;}

.clear:after{content:"";display:block;visibility:hidden;height:0;clear:both;}

.clear{zoom:1}

/*--以上为格式化标签样式--*/

input{ border:0; background:#f1f1f1; display:inline-block; height:30px; padding:0 40px 0 10px; width:200px; color:#999; outline:none;}

</style>

4、页面代码结构。

5、查看效果。