Просмотр исходного кода

增加搜索按钮 ,增加回车文字显示为搜索

guohh лет назад: 5
Родитель
Сommit
fe588c1c70

+ 12 - 0
2020/x-3/biz/css/base-ghh.css

@ -3456,4 +3456,16 @@ body:not(.body-unsupport-copy) .ipu-list-item-manual {
3456 3456
  text-align: center;
3457 3457
  color: #1A202C;
3458 3458
  padding: .24rem;
3459
}
3460
3461
input[type="search"]::-webkit-search-cancel-button {
3462
  display: none;
3463
}
3464
3465
.common-search-btn{
3466
  margin-left: .1rem;
3467
  border-radius: .04rem;
3468
  font-size: .14rem;
3469
  line-height: .22rem;
3470
  padding: 9px 11px;
3459 3471
}

+ 4 - 0
2020/x-3/biz/js/common/tool.js

@ -58,6 +58,10 @@ define(["jquery", "ipuUI", "moment-wrap"], function ($, ipuUI, moment) {
58 58
      // 调用width()是为了让当前对元素的修改马上生效,默认应该是延迟生效,等待刷新时生效?
59 59
      // 在获取元素宽度,高度时或位置时,会让前面,对dom的修改马上生效
60 60
61
      $(".common-search-wrap", this).submit(function () {
62
        return false; //阻止form跳转
63
      });
64
61 65
      $(".common-search-input", this).focus(function () { // 输入框激活时
62 66
        $(obj).addClass("common-search-active");
63 67
      });

+ 7 - 3
2020/x-3/contact-picker-remove.html

@ -36,17 +36,21 @@
36 36
        </div>
37 37
38 38
39
        <div class="ipu-flex-grow-1 ipu-flex  common-search-wrap">
39
        <form class="ipu-flex-grow-1 ipu-flex  common-search-wrap">
40 40
          <div class="ipu-flex-center-middle  common-search-tip">
41 41
            <i class="common-search-icon ri-search-2-line"></i>
42 42
            <span class="common-search-tip-msg">搜索联系人</span>
43 43
          </div>
44 44
          <div class="ipu-flex-grow-1">
45
            <input class="common-search-input" placeholder="">
45
            <input class="common-search-input" placeholder="" type="search">
46 46
          </div>
47
        </div>
47
        </form>
48 48
        <i class="ipu-flex-grow-0 common-search-input-clear ri-close-circle-fill"></i>
49 49
      </div>
50
51
      <div class="ipu-flex-grow-0">
52
        <button class="ipu-btn common-search-btn">搜索</button>
53
      </div>
50 54
    </div>
51 55
52 56
  </div>

+ 6 - 3
2020/x-3/contact-picker.html

@ -35,17 +35,20 @@
35 35
          </ul>
36 36
        </div>
37 37
38
        <div class="ipu-flex-grow-1 ipu-flex  common-search-wrap">
38
        <form class="ipu-flex-grow-1 ipu-flex  common-search-wrap">
39 39
          <div class="ipu-flex-center-middle  common-search-tip">
40 40
            <i class="common-search-icon ri-search-2-line"></i>
41 41
            <span class="common-search-tip-msg">搜索联系人</span>
42 42
          </div>
43 43
          <div class="ipu-flex-grow-1">
44
            <input class="common-search-input" placeholder="">
44
            <input class="common-search-input" placeholder="" type="search">
45 45
          </div>
46
        </div>
46
        </form>
47 47
        <i class="ipu-flex-grow-0 common-search-input-clear ri-close-circle-fill"></i>
48 48
      </div>
49
      <div class="ipu-flex-grow-0">
50
        <button class="ipu-btn common-search-btn">搜索</button>
51
      </div>
49 52
    </div>
50 53
51 54
  </div>

+ 8 - 5
2020/x-3/index.html

@ -491,17 +491,20 @@
491 491
                <div class="pages-contact-title">
492 492
                  通讯录
493 493
                </div>
494
                <div class="common-search">
495
                  <div class="ipu-flex common-search-content">
494
                <div class="common-search ipu-flex-middle">
495
                  <div class="ipu-flex-grow-1 ipu-flex common-search-content">
496 496
                    <div class="ipu-flex-center-middle  common-search-tip">
497 497
                      <i class="common-search-icon ri-search-2-line"></i>
498 498
                      <span class="common-search-tip-msg">搜索</span>
499 499
                    </div>
500
                    <div class="ipu-flex-grow-1 common-search-wrap">
501
                      <input class="common-search-input" placeholder="">
502
                    </div>
500
                    <form class="ipu-flex-grow-1 common-search-wrap">
501
                      <input class="common-search-input" placeholder="" type="search">
502
                    </form>
503 503
                    <i class="ipu-flex-grow-0 common-search-input-clear ri-close-circle-fill"></i>
504 504
                  </div>
505
                  <div class="ipu-flex-grow-0">
506
                    <button class="ipu-btn common-search-btn">搜索</button>
507
                  </div>
505 508
                </div>
506 509
              </div>
507 510
              <div class="ipu-flex-col ipu-flex-col-auto">