console 命令行工具 X clear

console

var input = document.getElementsByClassName('input')[0];

input.addEventListener('blur', function() {
    input.scrollIntoView({
        block: 'end',
        behavior: 'auto'
    });
  	$('.lenovo_con').hide();
});

input.addEventListener('focus', function(e) {
  const ipt = e.target;
  if (document.selection) {
    // ios使用下方方法，会出现输入拼音失焦后，出现双倍内容的情况
    this.select();
  } else if (typeof ipt.selectionStart === 'number' && typeof ipt.selectionEnd === 'number') {
    // ios使用ipt.selectionStart = ipt.value.length 会出现输入拼音失焦后，出现双倍内容的情况
    // 聚焦时全选内容
    ipt.selectionStart = 0;
    ipt.selectionEnd = ipt.value.length;
  }
});

input.addEventListener('input', function(e) {
    if (e.target.value) {
      $('.lenovo_con').show();
    } else {
      $('.lenovo_con').hide();
    }
});

$('.footer_btn').on('mousedown', function () {
  $('.input').val('');
});

$('.body_wrap').on('touchmove', function() {
	$('.input').blur();
  input.scrollIntoView({
    block: 'end',
    behavior: 'auto'
  });
});

$('.lenovo_item').on('click', function () {
  
});

document.onkeydown = function (e) { // 回车提交表单
// 兼容FF和IE和Opera
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
    if (code == 13) {
        $('.input').val('');
      
        $('.input').blur();
        input.scrollIntoView({
          block: 'end',
          behavior: 'auto'
        });
    }
}

<body>
    <div class=dialog_wrap>
      <div class="body_wrap">
        <div class="diag_item robot_diag_item">
          <div class="pic_box"><div data-v-2e3887bd="" class="selected_share_bg" style="display: none;">
            <img data-v-2e3887bd="" src="//i.thsi.cn/iwencai/pubrobot/images/share_unselected.png" class="selected_share_img"></div>
            <img src="https://u.thsi.cn/fileupload/data/Iwencai/2018/1efc8dd860480fc6a3d551e33e40d6a4.png" class="diag_pic robot_pic share_pic"></div>
          <div class="common_width">
            <div class="info_box soft_info_box"><div class="arrow_img_left arrow_img_bg"></div>
              <div class="answer_box"><div data-v-dc448dea="" class="break_word bubble_elem">
                <div data-v-dc448dea="" class="simple_text_list">
                  <div data-v-dc448dea="">
                    <p>输入框问题测试V5</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="lenovo_con" style="bottom: 55px;">
        <ul class="list_con">
          <li class="lenovo_item"><span class="lenovo_item_inner">300507 苏奥传感 <span class="strong_color">S</span>ACG 深A</span></li>
          <li class="lenovo_item"><span class="lenovo_item_inner">600636 三爱富 <span class="strong_color">S</span>AF 沪A</span></li>
          <li class="lenovo_item"><span class="lenovo_item_inner">600703 三安光电 <span class="strong_color">S</span>AGD 沪A</span></li>
        </ul>
      </div>
      
      <div class="footer_component">
        <table style="height: 55.4px;">
          <tr>
            <td>
              <div class=footer_input_wrap>
                <textarea type="text" class='input' placeholder="请输入问句" value="" rows="1"></textarea>
              </div>
            </td>
            <td class="footer_right_btn">
              <div class="footer_btn"></div>
            </td>
          </tr>
        </table>
      </div>
    </div>
</body>

body, dd, div, dl, dt, form, html, input, li, ol, p, pre, table, td, textarea, th, ul{
  padding: 0;
  margin: 0
}
body,html{
  height: 100%;
}
.dialog_wrap{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.body_wrap{
  width: 100%;
  background: #ededed;
  /*position: absolute;
  top: 0;
  bottom: 55.4px;*/
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}
.footer_component{
    width: 100%;
    z-index: 10;
    background: #f6f6f6;
  bottom: 0;
}
.footer_component table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
.footer_component table td{
  text-align: center;
}
.footer_input_wrap{
    margin: 0 10px;
    background: #fff;
    overflow: hidden;
    border-radius: 4px;
}
.input{
   display: block;
    width: 100%;
    margin: 8px 0;
    padding: 0 10px 0 15px;
    outline: 0;
    border: none;
    box-sizing: border-box;
    text-shadow: none;
    resize: none;
    word-break: break-all;
    border-radius: 6px;
    background: #fff;
  font-size: 16px;
  height: 22px;
  overflow: hidden;
}
.footer_right_btn{
  width: 30px;
    padding-right: 10px;
}
.footer_btn{
  width: 30px;
  height: 30px;
  background-size: 300px 300px;
  background-image:url(//i.thsi.cn/iwencai/pubrobot/images/footer_btn_bg.png);
  background-repeat: no-repeat;
  background-position: -35px 0;
}

.diag_item {
    position: relative;
}
.pic_box {
    position: absolute;
}
.diag_item .diag_pic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    vertical-align: top;
}
.common_width {
    padding-right: 38px;
}
.robot_diag_item .soft_info_box {
    display: inline-block;
}
.robot_diag_item .info_box {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #eaeaea;
}
.diag_item .info_box {
    position: relative;
    padding: 0 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 512px;
}
.common_width .info_box {
    border-radius: 6px;
    margin-left: 46px;
}
.arrow_img_left {
    position: absolute;
    background-position: -1px -1px;
    top: 12px;
    left: -5px;
    z-index: 5;
}
.arrow_img_bg {
    background-image: url(//i.thsi.cn/iwencai/pubrobot/images/dialog_arrow.png);
    background-size: 15px 25px;
    width: 6px;
    height: 10px;
}
.bubble_elem {
    padding: 9px 0;
}
.break_word {
    word-wrap: break-word;
    word-break: break-all;
}

.lenovo_con {
    transition: all .3s ease-in;
    position: absolute;
    z-index: 12;
    bottom: 55px;
    left: 0;
    right: 0;
    max-height: 117px;
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
  background: white;
  display: none;
}
.lenovo_con .list_con {
    overflow: hidden;
}
.lenovo_con .list_con .lenovo_item, .lenovo_item_inner {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.lenovo_con .list_con .lenovo_item {
    padding: 0 15px;
    -webkit-tap-highlight-color: rgba(0,0,0,.05);
    cursor: pointer;
    position: relative;
    margin-top: -1px;
}
.lenovo_item_inner {
    padding: 10px 15px 10px 0;
    display: block;
    border-top: 1px solid #f0f0f0;
}

本项目引用的自定义外部资源

;zepto.js