带有活动字段高亮显示和指令范围的窗体元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带有活动字段高亮显示和指令范围的窗体元素相关的知识,希望对你有一定的参考价值。

  1. jQuery:
  2.  
  3. // hide all instructions
  4. $('.defaultForm li > .instructions').hide();
  5.  
  6. function hilite(elem){
  7. // remove any previously selected hilite's and instructions if any
  8. $('.defaultForm li.selected .instructions').hide();
  9. $('.defaultForm li.selected').removeClass("selected");
  10.  
  11. // hilite and show instructions if any
  12. elem.parent('li').addClass("selected");
  13. elem.parent('label').parent('li').addClass("selected");
  14. elem.siblings('.instructions').show();
  15. elem.parent().siblings('.instructions').show();
  16. }
  17.  
  18.  
  19. // on focus tests for various types of form elements
  20. var inputFocused = false;
  21.  
  22. // input fields
  23. $('.defaultForm * > input').focus(function () {
  24. // check to see if input field is not a button
  25. if( !$(this).attr("src") || $(this).attr("value") != "submit"){
  26. hilite($(this));
  27. }
  28. inputFocused = true;
  29. });
  30.  
  31. // radio and checkboxes only get detected with onclick (or tab) for chrome/safari
  32. if(!inputFocused){
  33. $('.defaultForm * > input').click(function () {
  34. // check to see if input field is not a button
  35. if( !$(this).attr("src") || $(this).attr("value") != "submit"){
  36. hilite($(this));
  37. }
  38. });
  39. }
  40.  
  41. // text areas
  42. $('.defaultForm * > textarea').focus(function () {
  43. hilite($(this));
  44. });
  45.  
  46. // select boxes
  47. $('.defaultForm * > select').focus(function () {
  48. hilite($(this));
  49. });
  50.  
  51.  
  52. html Markup:
  53. <form name="formExample" id="formExample" action="">
  54. <ul class="defaultForm">
  55. <li>
  56. <label for="name">Your Full Name:</label><input name="name" type="text" class="inputText onehalf" />
  57. <span class="required">*</span><span class="error">! Please enter your full name</span>
  58. <span class="instructions">Please enter your full name</span>
  59. </li>
  60. </ul>
  61. </form>
  62.  
  63.  
  64. CSS:
  65. ul.defaultForm{}
  66. ul.defaultForm li{clear:left; padding:6px 0 2px; line-height:180%;}
  67. ul.defaultForm li.selected{background-color:#F5F5F5;}
  68. ul.defaultForm li label{float:left; width:150px; padding-right:20px; margin-top:-2px; font-weight:normal; text-align:right;}
  69. ul.defaultForm li label.radio,
  70. ul.defaultForm li label.checkbox{float:none; width:auto;}
  71. ul.defaultForm li .required{padding-left:5px;}
  72. ul.defaultForm li .error{display:block; margin-left:170px; color:#D71111; font-weight:bold; display:none; }
  73. ul.defaultForm li .instructions{display:block; margin-left:170px; color:#666;}
  74.  
  75. .onethird{width:33%;}
  76. .fortypercent{width:40%}
  77. .onehalf{width:50%;}
  78. .twothirds{width:66%;}
  79. .fullwidth{width:100%;}

以上是关于带有活动字段高亮显示和指令范围的窗体元素的主要内容,如果未能解决你的问题,请参考以下文章

python+selenium高亮显示正在操作的页面元素

python+selenium高亮显示正在操作的页面元素

ElasticSearch多个字段分词查询高亮显示

python+selenium高亮显示正在操作的页面元素

Elasticsearch php 多字段高亮显示

Elasticsearch php 多字段高亮显示