input.axml 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <view class="page">
  2. <view class="page-description">输入框</view>
  3. <!--
  4. <view class="page-section">
  5. <view class="form-row">
  6. <view class="form-row-label">受控聚焦</view>
  7. <view class="form-row-content">
  8. <input class="input" focus="{{focus}}" onFocus="onFocus" onBlur="onBlur" placeholder="input something" />
  9. </view>
  10. </view>
  11. <view class="page-section-btns">
  12. <button size="mini" onTap="bindButtonTap">聚焦</button>
  13. </view>
  14. </view>
  15. -->
  16. <view class="page-section">
  17. <view class="form-row">
  18. <view class="form-row-label">显示输入</view>
  19. <view class="form-row-content">
  20. <input class="input" onInput="bindKeyInput" placeholder="show input content" />
  21. </view>
  22. </view>
  23. <view class="extra-info">你输入的是:{{inputValue}}</view>
  24. </view>
  25. <view class="page-section">
  26. <view class="form-row">
  27. <view class="form-row-label">最大长度</view>
  28. <view class="form-row-content">
  29. <input class="input" maxlength="10" placeholder="maxlength 10" />
  30. </view>
  31. </view>
  32. <view class="form-line" />
  33. <view class="form-row">
  34. <view class="form-row-label">收起键盘</view>
  35. <view class="form-row-content">
  36. <input class="input" onInput="bindHideKeyboard" placeholder="输入 123 自动收起键盘" />
  37. </view>
  38. </view>
  39. <view class="form-line" />
  40. <view class="form-row">
  41. <view class="form-row-label">输入密码</view>
  42. <view class="form-row-content">
  43. <input class="input" password type="text" placeholder="密码输入框" />
  44. </view>
  45. </view>
  46. <view class="form-line" />
  47. <view class="form-row">
  48. <view class="form-row-label">输入数字</view>
  49. <view class="form-row-content">
  50. <input class="input" type="number" placeholder="数字输入框" />
  51. </view>
  52. </view>
  53. <view class="form-line" />
  54. <view class="form-row">
  55. <view class="form-row-label">小数点键盘</view>
  56. <view class="form-row-content">
  57. <input class="input" type="digit" placeholder="带小数点的数字键盘" />
  58. </view>
  59. </view>
  60. <view class="form-line" />
  61. <view class="form-row">
  62. <view class="form-row-label">身份证键盘</view>
  63. <view class="form-row-content">
  64. <input class="input" type="idcard" placeholder="身份证输入键盘" />
  65. </view>
  66. </view>
  67. </view>
  68. <view class="page-section">
  69. <view class="page-section-title">搜索框</view>
  70. <view class="page-section-demo">
  71. <view class="search-outer">
  72. <input
  73. class="search-input"
  74. placeholder="搜索"
  75. value="{{search}}"
  76. onConfirm="doneSearch"
  77. onInput="handleSearch"
  78. />
  79. <text class="search-cancel" onTap="clearSearch">取消</text>
  80. </view>
  81. </view>
  82. </view>
  83. </view>