输入框提示tip

<script type="text/javascript">
    var pltsoffsetX = 10; // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
 var pltsoffsetY = 12; // 弹出窗口位于鼠标下方的距离;3-12 合适
 var pltsTitle="";
 document.write('<div id=pltsTipLayer align=center style="FILTER:alpha(opacity=90); vertical-align: middle; display: none;width: 200;height: 20;position: absolute; background-color: white;border: 1px solid #000000">请输入正确的日期格式,如2008-09</div>');
    function displayTip()
    {
     var pltsTip = document.getElementById('pltsTipLayer');
     pltsTip.style.display="block";
     var MouseX=event.x;
   var MouseY=event.y;
   var popTopAdjust=0;
   var popLeftAdjust=0;
   var popHeight=pltsTipLayer.clientHeight;
  var popWidth=pltsTipLayer.clientWidth;
      if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
  {
   popLeftAdjust=-popWidth-pltsoffsetX*2;
  }
  else
  {
    popLeftAdjust=0;
  }
  pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
  pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
  
    }
   
    function hideTip()
    {
     var pltsTip = document.getElementById('pltsTipLayer');
     pltsTip.style.display="none";
    }
 </script>

 

onfocus="displayTip();"

onblur="hideTip();"

在 UniApp 中实现表单输入框下方添加提示信息,可以通过结合 `u-form` 和 `u-form-item` 组件来实现,同时利用 `u-input` 和自定义的提示标签来展示信息。以下是具体的实现方法: ### 使用 `u-form` 和 `u-form-item` 结合提示信息 在 `u-form-item` 组件中,可以通过 `prop` 属性绑定对应的表单项,并且在其下方添加一个 `view` 或者 `text` 标签用于展示提示信息。 #### 示例代码 ```html <template> <u-form :model="form" :rules="rules" ref="uForm"> <u-form-item label="用户名" prop="username"> <u-input v-model="form.username" placeholder="请输入用户名" /> <text class="tip-text">请输入您的用户名,用于登录系统</text> </u-form-item> <u-form-item label="密码" prop="password"> <u-input v-model="form.password" placeholder="请输入密码" type="password" /> <text class="tip-text">密码长度不少于6位,包含字母和数字</text> </u-form-item> </u-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' } ] } }; } }; </script> <style> .tip-text { font-size: 12px; color: #999; margin-top: 5px; } </style> ``` ### 关键点说明 1. **`u-form` 和 `u-form-item` 的绑定关系**:`u-form-item` 的 `prop` 属性需要与 `form` 对象中的字段名保持一致,例如 `username` 和 `password`,这样可以正确地绑定表单验证规则 [^3]。 2. **提示信息展示**:在 `u-form-item` 内部添加一个 `text` 或 `view` 标签,并通过 `class` 设置样式,使其显示为提示信息。 3. **样式优化**:通过 CSS 设置提示信息的字体大小和颜色,使其与输入框内容区分开来。 ### 自定义组件方式 如果需要在多个页面复用该功能,可以将 `u-form-item`、`u-input` 和提示信息封装成一个自定义组件,例如 `CustomInputWithTip`,这样可以减少重复代码,提高开发效率 [^2]。 #### 示例:自定义组件 `CustomInputWithTip.vue` ```html <template> <u-form-item :label="label" :prop="prop"> <u-input v-model="value" :placeholder="placeholder" :type="inputType" /> <text class="tip-text">{{ tip }}</text> </u-form-item> </template> <script> export default { props: { label: String, prop: String, value: [String, Number], placeholder: String, inputType: { type: String, default: 'text' }, tip: String } }; </script> <style> .tip-text { font-size: 12px; color: #999; margin-top: 5px; } </style> ``` #### 使用自定义组件 ```html <template> <u-form :model="form" :rules="rules" ref="uForm"> <custom-input-with-tip label="用户名" prop="username" v-model="form.username" placeholder="请输入用户名" :tip="'请输入您的用户名,用于登录系统'" /> <custom-input-with-tip label="密码" prop="password" v-model="form.password" placeholder="请输入密码" input-type="password" :tip="'密码长度不少于6位,包含字母和数字'" /> </u-form> </template> <script> import CustomInputWithTip from '@/components/CustomInputWithTip.vue'; export default { components: { CustomInputWithTip }, data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '用户名不能为空', trigger: 'blur' } ], password: [ { required: true, message: '密码不能为空', trigger: 'blur' } ] } }; } }; </script> ``` ### 总结 通过上述方法,可以在 UniApp 中实现表单输入框下方的提示信息展示。使用 `u-form` 和 `u-form-item` 的结构可以很好地结合表单验证功能,同时通过 `text` 或 `view` 标签展示提示信息。如果需要复用,可以将功能封装成自定义组件,提高代码的可维护性和开发效率 [^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值