Cacher is the code snippet organizer for pro developers

表单

1. 提交表单时，需要阻止默认事件
   • 当先校验客户提交的数据,格式是否正确
   • 当需要对这些数据进行一个处理再提交 就需要先阻止下默认提交表单的行为

submit = (e) => {
    e.preventDefault();
    ...
}

1. 使用form标签时，需要对设置按钮的类型type = "button"，否则点击按钮页面会来回跳。

<form>
    <input type="text" name="username" placeholder="请输入您的账号" />
    <input type="password" name="password" placeholder="请输入您的密码" />       
    <button type="button" class="submitBtn">登 录</button>
</form>

3.删除 浏览器自带input输入框会有黄色背景，以及删除处于焦点的输入框border

.input-value {
      border: 0;
      height: 60px;
      width: 150px;
      -webkit-box-shadow: 0 0 0 1000px white inset;

      &:focus {
        outline: none !important;
        border: none;
        box-shadow: white;
      }
    }

// 去掉按钮点击时外边框
button:focus {
    outline:0;
}

1. 垂直居中

• 块状元素，利用盒子模型的padding属性，套一个父div，然 后通过计算父盒子高度和子盒子高度差，分配padding上下值

  // 根据可视区域高度，自适应居中
  const visibleHeight = $(window).height();
  $('.parent').height(visibleHeight);
  
  const $child = $('.child');
  let paddingVal = Math.floor((visibleHeight - $child.height()) / 2 / 2);
  $mainBox.css({ 'padding-top': `${paddingVal}px` });
  $mainBox.css({ 'padding-bottom': `${paddingVal}px` });

• 行内元素，设置line-height值与高度值一致，实现垂直居中，仅适用于单行文本

.text {
    display: inline-block;
    height: 20;
    line-height: 20px
}

1. 水平居中

• 行内元素 ，text-align: center
• 固定宽度的块状元素

 width: 200px;
 margin: 0 auto;

1. 父页面和子页面之间传递消息，无跨域问题

// 父页面farther.html

<iframe id="form-apply"
          src="child.html"
          width="800"
          height="500"
          frameborder="0"
          scrolling="no"></iframe>

...

// 接收传递过来的消息
window.addEventListener('message',function(e){
        let string=e.data;
        switch(string) {
            case 'close':
                closeModal();
                break;
            case 'success':
                applySuccess();
                break;
            default:
                applySuccess();
        }
    },false);

function closeModal() {
        let $modalForm = document.getElementById('modal-form');
        $modalForm.style.display = "none";
    }

    function applySuccess () {
        window.frames['form-apply'].src= "http://c.sit.lattebank.com/loanweb/applySuccess";
    }





// 子页面中child.html

$('.submit').on('click', (e) => {
// 给父页面传递'success'的字符串
    window.parent.postMessage('success','*');
}

1. 遮罩层

<div id="modal-form" class="modal" >
  <iframe id="form-apply"
          src="http://c.sit.lattebank.com/loanweb/adRelease"
          width="800"
          height="500"
          frameborder="0"
          scrolling="no"></iframe>
</div>



// 样式
.modal {
  position: fixed;   // 可以保证以原有页面内容的高度，遮罩
  top: 0;
  left: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  height: 100%;
  width: 100%;
  display: none;
  justify-content: center;
}

.modal iframe {
  margin-top: 114px;
}

1. 垂直居中，水平居中

 <div>
    <span>dddddd</span>
  </div>

div {
 min-height: 60px;
 display: flex;
 justify-content: center;
 align-items:center;
}