`

jquery显示输入提示信息

阅读更多

1、JS部分

function mousePosition(ev){
    if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
     }
     return {
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y:ev.clientY + document.body.scrollTop  - document.body.clientTop
      };
}

function mouseMove(ev){
   ev = ev || window.event;
   var mousePos = mousePosition(ev);
   document.getElementById('xxx').value = mousePos.x;
 document.getElementById('yyy').value = mousePos.y;
}

document.onmousemove = mouseMove;
function seashowtip(id,flag,iwidth){
    var my_tips=$("#mytips");
    var tips;
    if($("#"+id).attr("datatype")=="normal"){
        tips="请输入"+$("#"+id).attr("min")+"个到"+$("#"+id).attr("max")+"个之间的字符";
    }else if($("#"+id).attr("datatype")=="number"){
        tips="请输入"+$("#"+id).attr("min")+"到"+$("#"+id).attr("max")+"位的数字";
    }else if($("#"+id).attr("datatype")=="floatdata"){
        tips="请输入有"+$("#"+id).attr("min")+"到"+$("#"+id).attr("max")+"位小数位小于1的小数";
    }
    if(flag){
        my_tips.html(tips);
        my_tips.css("display","");
        my_tips.css("width",iwidth);
              var  l=document.getElementById('xxx').value;
              var  t=document.getElementById('yyy').value;
              my_tips.css("left",l);
              my_tips.css("top",t);
       }
    else
    {
       my_tips.css("display","none");
       }
    }
 

 

2、页面部分

 

<div id=mytips style="position:absolute;background-color:#ffffff;width:121;height:16;border:1px solid gray;display:none;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3); left:0; top:5"></div>
<input id="xxx" type="hidden" /><input id="yyy" type="hidden" />

<table width="600" border="0" cellpadding="0" cellspacing="1">
    <tr>
        <td>商品组名称:</td>
        <td><input type="text" max ="20" min ="5" datatype="normal" owntxt="商品组名称" ifnull="notnull" id="groupName" name="tpgDTO.groupName"
         class="text ui-widget-content ui-corner-all" style="width: 400px;" value="<s:property value="tpgDTO.groupName"/>" onmousemove="seashowtip('groupName',1,160)" onmouseout="seashowtip('groupName',0,160)"/>
        </td>
    </tr>
    <tr>
        <td>备注</td>
        <td><input type="text" max = "300" min = "3" datatype="normal" owntxt="备注" ifnull="cannull" id="remark" name="tpgDTO.remark"
        class="text ui-widget-content ui-corner-all" style="width: 400px;" value="<s:property value="tpgDTO.remark"/>" onmousemove="seashowtip('remark',1,160)" onmouseout="seashowtip('remark',0,160)"/>
        </td>
    </tr>
    <tr>
        <td>test浮点数:</td>
        <td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="浮点数" ifnull="cannull" id="testfloat"
         class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('testfloat',1,200)" onmouseout="seashowtip('testfloat',0,200)"/>
        </td>
    </tr>
    <tr>
        <td>test整数:</td>
        <td><input type="text" max ="8" min ="1" datatype="number" owntxt="整数" ifnull="cannull" id="number"
         class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('number',1,120)" onmouseout="seashowtip('number',0,120)"/>
        </td>
    </tr>
    <tr>
        <td>test比较大小前者:</td>
        <td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="毛利" ifnull="cannull" id="lower"
         class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('lower',1,200)" onmouseout="seashowtip('lower',0,200)"/>
        </td>
    </tr>
    <tr>
        <td>test比较大小后者:</td>
        <td><input type="text" max ="2" min ="1" datatype="floatdata" owntxt="毛利" ifnull="cannull" id="uper"
         class="text ui-widget-content ui-corner-all" style="width: 400px;" onmousemove="seashowtip('uper',1,200)" onmouseout="seashowtip('uper',0,200)"/>
        </td>
    </tr>
    <tr>
        <td>范围</td>
        <td><button id="show-filtercond-btn" style="font-size: 90%;">制定筛选条件</button></td>
    </tr>
</table>
 

不懂的联系QQ526151410

  • 大小: 50.2 KB
分享到:
评论

相关推荐

    jquery输入的时候自动提示

    首先,我们需要理解基本的HTML结构,这通常包括一个输入框(`&lt;input&gt;`元素)和一个用来显示提示信息的下拉列表(可以是`&lt;ul&gt;`或`&lt;div&gt;`)。例如: ```html 请输入关键词"&gt; &lt;div id="suggestionList"&gt;&lt;/div&gt; ``` 接...

    11 基于jquery的搜索框输入提示.rar_jquery_输入提示_输入框提示

    此外,还需要一个容器元素,如`&lt;ul&gt;`或`&lt;div&gt;`,用于显示提示信息。这些元素可以通过ID或类选择器在jQuery中被选中。 接着,我们需要监听输入框的`keyup`事件,每当用户在输入框中键入字符时,该事件就会触发。在...

    jquery validate 信息气泡提示

    结合 PoshyTip 插件,我们可以实现更友好的提示信息展示,即在验证失败时以信息气泡的形式向用户展示错误信息。 PoshyTip 是一个基于 jQuery 的高质量提示插件,它提供了多种样式和自定义选项,可以创建美观、动态...

    jQuery输入前提示

    `focus`事件中,我们可以初始化提示信息;`keyup`事件中,根据用户输入动态更新提示内容。 ```javascript $("#inputId").on("focus", function() { // 初始化提示 }).on("keyup", function() { // 根据用户...

    jqueryUI 提示框显示工具

    jQuery UI 的提示框(Tooltip)是一种优雅的方式来展示额外的信息,帮助用户理解页面上的元素或数据。这些提示通常会在鼠标悬停在特定元素上时出现,提供简洁明了的说明。 **一、jQuery UI 的安装与引入** 在使用 ...

    jquery Dreamweave代码提示插件

    jQuery Dreamweaver代码提示插件的工作原理是分析jQuery的API文档,并将其中的方法、属性和参数等信息整合到Dreamweaver的代码提示系统中。当你在Dreamweaver中输入jQuery语法时,插件会即时显示相关的函数和方法,...

    jquery输入框提示插件input输入框文字下拉提示添加标签代码

    // 在这里处理用户输入并显示下拉提示 }); }); ``` 3. **数据源**:下拉提示的数据通常来源于服务器或预先定义的数组。这里假设我们有一个 JSON 数组,包含了提示项。 ```javascript var suggestions = ['Apple'...

    带自动提示功能的jQuery标签输入插件

    它允许用户在输入框中输入信息时,自动显示一组预定义的标签作为提示。这些标签是预先设定好的,可以在后台数据库或者JSON文件中存储,当用户输入与某一个或多个标签相关的字符时,插件会智能地匹配并展示出来。这种...

    jQuery validator addMethod 根据不同情况显示不同错误信息

    总结来说,`jQuery validator addMethod`提供了一种灵活的方式来自定义表单验证规则,可以根据不同的输入情况显示不同的错误信息。结合jQuery Validation Plugin的其他功能,如`rules`和`messages`,我们可以构建出...

    jQuery带提示信息的日期日历插件

    总之,这款“jQuery带提示信息的日期日历插件”结合了美观的界面设计和实用的功能,是网页开发中增强日期输入交互的好帮手。通过学习和使用此类插件,开发者不仅可以提升工作效率,还能提升网站的整体质量和用户体验...

    jQuery 机票预定网站智能输入提示

    在构建一个交互性强、用户体验优秀的在线机票预定网站时,jQuery 的智能输入提示功能扮演着至关重要的角色。这个功能能够帮助用户快速找到他们想要的目的地,提高预订效率,降低用户操作难度,从而提升整个网站的...

    jquery input国际电话输入提示表单代码

    比如,当用户输入电话号码时,可以使用jQuery的.fadeIn()和.fadeOut()方法显示和隐藏提示信息。在输入框聚焦和失去焦点时,也可以用.slideToggle()来改变提示文字的可见性。 总结来说,“jquery input国际电话输入...

    js jquery 自动在文本框提示信息

    对于“自动在文本框提示信息”,我们通常指的是当用户聚焦到文本输入框时,显示一段预设的提示文本,而当用户开始输入时,这个提示文本会自动消失或者改变。 实现这一功能,首先需要在HTML中设置一个文本输入框,并...

    jQuery弹出对话框及提示信息

    jQuery对话框和提示信息是用户交互的重要组成部分,它们可以用来展示警告、确认信息、提供输入字段或者显示详细内容,从而提高用户体验。本文将深入探讨jQuery中的这些功能及其应用。 首先,我们来了解jQuery的`...

    JQuery实现输入框大写提示

    在这个例子中,当用户在密码输入框中键入大写字母时,会显示一个红色的提示信息。当用户输入非大写字母时,提示会自动消失。 总的来说,通过结合JQuery的事件处理和DOM操作能力,我们可以轻松实现输入框大写提示的...

    jquery实现input搜索输入关键词后自动筛选相关信息效果

    在本教程中,我们将深入探讨如何利用jQuery来实现一个搜索输入框的功能,当用户在input框中输入关键词时,能自动筛选并显示与之匹配的相关信息。 首先,我们需要在HTML中设置一个input元素作为搜索框,并且定义一个...

    jquery 诱导输入插件 支持多控件传值和回填

    这种功能常见于搜索框,当用户开始输入关键词时,插件会自动显示与输入内容匹配的建议列表,类似于Google搜索的下拉提示。 在描述中提到的"支持多控件传值和回填",这意味着该插件不仅限于单个输入框,而是可以同时...

    jquery表单input输入框动画提示效果代码

    在`blur`事件中,如果输入为空或者不符合要求,提示框可以显示错误信息,并以动画形式呈现;在`change`事件中,可以检查输入是否符合验证规则,若符合则清除提示,否则显示相应的错误提示。 例如,以下是一个简单的...

    基于jQuery的鼠标移到问号上出现提示框的demo,可以用于表单项的说明

    "基于jQuery的鼠标移到问号上出现提示框的demo"是一个常见的交互元素,常用于提供表单项的附加信息或帮助用户理解复杂的输入要求。这个功能利用了jQuery库的强大功能,使得在网页上实现这种交互效果变得简单高效。 ...

    用Jquery做的几种输入时间的例子

    在网页开发中,用户输入的数据验证是至关重要的,特别是对于日期和时间这类敏感信息。`Jquery`,作为一款广泛使用的JavaScript库,提供了强大的功能来帮助开发者实现这一目标。本篇文章将详细介绍如何利用`Jquery`...

Global site tag (gtag.js) - Google Analytics