HTML input 文本框添加提示文字的方法

周未休息，感觉没啥可写的，就水一篇文章吧，说一说前端 html 页面中 input 元素中在没有值的情况下，添加提示的文字，当要输入文字的时候，提示的文字消失。
关于 html input 输入框的提示文字，有两种方法可以实现，一种为 input 元素的 placeholder 属性，一种为 js 方法。

input 元素的 placeholder 属性

placeholder：属性提供可描述输入字段预期值的提示信息
语法：

<input placeholder="提示的文字">

例：input 添加提示的文字
代码：

<input type="text" placeholder="这里是提示的文字">

运行结果：

当input输入框，输出文字时，提示的文字信息会消失

js 方法添加 input 元素提示文字

示例代码：

<input type="text"  onfocus="javascript:if(this.value=='请输入内容')this.value='';">

运行结果：

注：
1、js 方法添加的提示文字不同于使用 placeholder 属性添加的效果
2、placeholder 属性添加的提示文字，只有输入内容时文字才会消失
3、js 方式添加的提示文字，当光标定位到 input 输入框中时，提示文字就会消失
文章来源：https://www.feiniaomy.com/post/471.html

HTML input 文本框添加提示文字的方法相关推荐

axure文本框单击提示文字消失_Axure基础原件使用
本内容从网上搜索,仅供参考学习 1. 添加元件到工作区在左侧元件中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置上松开. 2. 添加元件名称在检视面板的元件名称文本框中输入元件自定义名称. ...
input文本框的提示效果
input文本框的提示有很多种,可以根据需求进行选择通过设置placeholder属性值进行提示 placeholder 属性提供可描述输入字段预期值的提示信息(hint).该提示会在输入字段为空时 ...
给input文本框添加灰色提示文字
大家都见到很多网站的文本框都有灰色提文字,一点即消失,鼠标一开又出现(没填写状态下)用下面这段短短的代码就可以实现啦! 将这段代码加载input 中! value="你的提示文字" ...
使用 JQUERY 为文本框增加提示文字
为什么80%的码农都做不了架构师?>>> /*** 文本框提示文字* @author zhuhu*/function inpHint(idStr,valStr){var idA ...
Js获取input文本框值的几种方法
首先编写一个HTML,代码如下: <form id="form1"><table border="0"><tr><td ...
HTML中input文本框只读不可编辑的方法
方法1: οnfοcus=this.blur() 当鼠标放不上就离开焦点 <input type="text" name="input1" value=& ...
给文本框添加灰色提示文字
html> <head> <title>中国站长天空-网页特效-表单特效-给文本框添加灰色提示文字</title> <meta http-equiv=& ...
HTML-input文本框（添加提示文字，填写内容时消失）
input文本框内添加提示文字,填写内容时消失: 用placeholder属性作为提示语 <input placeholder="提示语..."></input& ...
文字太多时给文本框添加滑动条——text + ContentSizeFitter + Scroll View
文字少的时候,直接显示文字:文字多的时候,自动添加滑动条,拖动滑动条后查看全部文字. 1.字少的时候 2.字多的时候自动增加一个垂直滑动条一.问题的来源在一个固定区域显示文字,这些文字有时候会很多 ...

HTML input 文本框添加提示文字的方法

input 元素的 placeholder 属性

js 方法添加 input 元素提示文字

HTML input 文本框添加提示文字的方法相关推荐

最新文章

热门文章