第七节 文本框的默认输入设置

        通常我们常见设置一些文本框,默认提示一段信息,在文本框输入值变化值切换实际输入值,那么这时怎么添加情形进行设置呢,请看下面这个案例说明。

第一种,添加文本框不为空,显示为当前输入值
1、添加文本框,设置文本框的默认输入提示语

2、添加第一种情形:当前文本改变时

3、添加条件值不为空:当前元件输入值!=“”,
4、添加目标【设置文本】,设置目标为"当前"设置为"元件文本",文本为“当前”

第二种,添加如果为空情形,则文本框继续显示原提示输入语。
1、添加情形这空

2、设立条件,元件文字当前为空

3、添加目标“设置文本”,设置当前动作为默认输入语

4、运行看效果

5、总结

整体流程步骤:情形->条件->目标->动作

     当然具体情况可以对条件与动作结合实际情况条件来进行设置,重点在于熟悉情形添加条件再设置对应动作步骤及方法,活学活用。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是代码实现: HTML: ```html <button id="add-btn">添加</button> <table id="product-table"> <tr> <td colspan="2"><strong>请输入商品信息</strong></td> </tr> <tr> <td align="center">商品内容:</td> <td><input type="text" name="content"></td> </tr> <tr> <td align="center">商品名称:</td> <td><input type="text" name="name"></td> </tr> <tr> <td align="center">商品类别:</td> <td> <select name="category"> <option value="">请选择商品类别</option> <option value="grain">粮食作物</option> <option value="vegetable">蔬菜</option> <option value="fruit">水果</option> </select> </td> </tr> <tr> <td align="center">商品产地:</td> <td><input type="text" name="origin"></td> </tr> <tr> <td align="center">商品价格:</td> <td><input type="number" name="price"></td> </tr> </table> ``` CSS: ```css #product-table { display: none; margin: 0 auto; border: 1px solid #ccc; background-color: #f5f5f5; width: 50%; } #product-table td { padding: 10px; text-align: center; } #product-table select { width: 100%; } ``` JavaScript: ```javascript $(document).ready(function() { $('#add-btn').click(function() { $('#product-table').show(); }); }); ``` 解释: 1. 首先,我们设置一个按钮,点击该按钮可以显示表单。按钮的id为`add-btn`。 2. 接着,我们创建一个table元素,该表单的id为`product-table`,默认情况下是隐藏的。 3. 表单中有7行内容,第一行为单独的文本内容,使用`colspan`属性将该单元格合并为一列。 4. 第2-6行均分为两列,使用`align`属性将内容居中显示。 5. 第4行第二列为下拉选择框,使用`select`元素创建,下拉选项使用`option`元素创建。 6. CSS中设置表单的样式,包括边框、背景颜色、居中等。 7. JavaScript中使用jQuery的`click()`方法监听按钮点击事件,当按钮被点击时,使用`show()`方法显示表单。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值