Question

我只在IE和Edge中遇到过一个罕见的问题。在我的应用程序中，有一个输入文本框。在输入一个句子甚至一个单词时，如果我在单词的中间按Enter键，它不仅会提交表单，还会在该点处打破单词。它看起来像一条新线，但事实并非如此。

以下是我尝试过的解决方案，但没有结果： 1）将文本框限制为单个行框 2）覆盖onkeypress功能 3）CSS调整白色空间，自动换行，分词（http://www.w3schools.com/cssref/）

之前有人遇到过这个问题，有什么见解吗？

 HTML
    <input tabindex="5" type="search" id="searchTextbox" placeholder="search" ng-model="model.searchText" ng-change="populateSearchSuggestion()" key-trap="search" searchval="model.searchText" key-function="setSearchText()">


CSS
.item-search-box {
  display: block;
  float: left;
  position: relative;
  width: 75%;
  height: 70px;
  border-left: solid 1px #f2f2f2;
  padding: 12px;
  padding-bottom: 0; }
  @media screen and (min-width: 1650px) {
    .item-search-box {
      width: 80%; } }
  .item-search-box i {
    display: block;
    font-size: 20px;
    position: absolute;
    top: 22px;
    left: 20px;
    opacity: 0.8; }
  .item-search-box input[type="search"] {
    display: block;
    float: left;
    width: calc(100% - 200px);
    border: none;
    height: 45px;
    padding: 0 0 3px 40px;
    font-size: 18px;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: solid 1px #e7e7e7;
        /*border-radius: $bradius; */ }
    .item-search-box input[type="search"]:-ms-input-placeholder {
      color: #cccccc; }
    .item-search-box input[type="search"]::-ms-clear {
      color: #b3b3b3;
      width: 30px;
      cursor: pointer; }
    .item-search-box input[type="search"]::-ms-clear:hover {
      color: #333; }
    .item-search-box input[type="search"]::-webkit-search-cancel-button {
      position: relative;
      right: 20px; }
    .item-search-box {
        white-space: nowrap;
        word-wrap: normal;
        word-break: keep-all;
    }

如何在单词中间按Enter键时防止单词进入换行符？

0 个答案: