input.wxml 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <import src="../common/template/icon.wxml" />
  2. <wxs src="../common/utils.wxs" module="_" />
  3. <wxs src="./input.wxs" module="this" />
  4. <view
  5. style="{{_._style([style, customStyle])}}"
  6. class="{{_.cls(classPrefix, [['border', !borderless]])}} {{classPrefix}}--layout-{{layout}} class {{prefix}}-class"
  7. aria-describedby
  8. >
  9. <!-- aria-describedby用于关联该行设置了aria-hidden的元素最近的焦点,解决触发焦点过度上下偏移的问题 -->
  10. <view class="{{classPrefix}}__wrap--prefix">
  11. <view class="{{classPrefix}}__icon--prefix">
  12. <slot name="prefix-icon" />
  13. <template
  14. wx:if="{{_prefixIcon}}"
  15. is="icon"
  16. data="{{tClass: prefix + '-class-prefix-icon', ariaHidden: true, ..._prefixIcon}}"
  17. />
  18. </view>
  19. <view class="{{classPrefix}}__label" aria-hidden>
  20. <slot name="label" />
  21. <text wx:if="{{label}}" class="{{prefix}}-class-label">{{label}}</text>
  22. </view>
  23. </view>
  24. <view class="{{classPrefix}}__wrap">
  25. <view class="{{classPrefix}}__content {{classPrefix}}--{{status}}">
  26. <input
  27. maxlength="{{maxlength}}"
  28. disabled="{{disabled}}"
  29. placeholder="{{placeholder}}"
  30. placeholder-style="{{placeholderStyle}}"
  31. placeholder-class="{{classPrefix}}__placeholder {{placeholderClass}}"
  32. value="{{value}}"
  33. bindinput="onInput"
  34. bindfocus="onFocus"
  35. bindblur="onBlur"
  36. bindconfirm="onConfirm"
  37. bindkeyboardheightchange="onKeyboardHeightChange"
  38. bindnicknamereview="onNickNameReview"
  39. password="{{type === 'password'}}"
  40. type="{{type === 'password' ? 'text' : type}}"
  41. focus="{{focus}}"
  42. confirm-type="{{confirmType}}"
  43. confirm-hold="{{confirmHold}}"
  44. cursor="{{cursor}}"
  45. cursor-spacing="{{cursorSpacing}}"
  46. adjust-position="{{adjustPosition}}"
  47. auto-focus="{{autoFocus}}"
  48. always-embed="{{alwaysEmbed}}"
  49. selection-start="{{selectionStart}}"
  50. selection-end="{{selectionEnd}}"
  51. hold-keyboard="{{holdKeyboard}}"
  52. safe-password-cert-path="{{safePasswordCertPath}}"
  53. safe-password-length="{{safePasswordLength}}"
  54. safe-password-time-stamp="{{safePasswordTimeStamp}}"
  55. safe-password-nonce="{{safePasswordNonce}}"
  56. safe-password-salt="{{safePasswordSalt}}"
  57. safe-password-custom-hash="{{safePasswordCustomHash}}"
  58. class="{{this.getInputClass(classPrefix, suffix, align, disabled)}} {{prefix}}-class-input"
  59. aria-role="textbox"
  60. aria-label="{{label}}"
  61. aria-roledescription="{{label}}"
  62. />
  63. <!--
  64. 这里aria-role="textbox"和aria-label组合使用实现ios的聚合焦点播报效果。
  65. ios会播报aria-label,不会重复播报aria-roledescription的内容;
  66. 安卓不会播报aria-label,会播报aria-roledescription的内容
  67. -->
  68. <view
  69. wx:if="{{_clearIcon && value.length > 0}}"
  70. class="{{classPrefix}}__wrap--clearable-icon"
  71. bind:touchstart="clearInput"
  72. >
  73. <template
  74. is="icon"
  75. data="{{tClass: prefix + '-class-clearable', ariaRole: 'button', ariaLabel: '清除', ..._clearIcon }}"
  76. />
  77. </view>
  78. <view class="{{classPrefix}}__wrap--suffix {{prefix}}-class-suffix" bind:tap="onSuffixClick">
  79. <text wx:if="{{suffix}}">{{suffix}}</text>
  80. <slot name="suffix" />
  81. </view>
  82. <view class="{{classPrefix}}__wrap--suffix-icon" bind:tap="onSuffixIconClick">
  83. <slot name="suffix-icon" />
  84. <template
  85. wx:if="{{_suffixIcon}}"
  86. is="icon"
  87. data="{{tClass: prefix + '-class-suffix-icon', ariaRole: 'button', ..._suffixIcon }}"
  88. />
  89. </view>
  90. </view>
  91. <view
  92. wx:if="{{tips && tips.length > 0}}"
  93. class="{{classPrefix}}__tips {{classPrefix}}--{{align}} {{prefix}}-class-tips"
  94. >{{tips}}
  95. </view>
  96. <slot name="tips" />
  97. </view>
  98. </view>