移动端和平板端输入框文本中间省略号显示及完整值提交的实现咨询

嗨，我明白你的需求啦——想在移动端和平板端让输入框里的长文本在中间显示省略号（比如你举的sdghkjsd ... ndfgjknk效果），而且点击编辑提交时，能完整发送原始内容或修改后的内容，不会因为视觉截断影响实际提交值对吧？咱们一步步来解决这个问题：

首先得说明：原生CSS的text-overflow: ellipsis只能实现末尾省略，要做到中间省略得换个思路，核心原则是：视觉截断只是给用户看的，输入框的实际value始终保持完整，这样才能保证提交的是真实内容。

一、移动端/平板端的中间省略显示方案 #

这里推荐两种实用方案，按需选择：

方案1：纯CSS实现（轻量易维护） #

原理是利用CSS伪元素和文本方向调整，让输入框前后部分文本露出，中间用省略号覆盖，完全不修改输入框的实际值：

/* 输入框基础样式：相对定位方便伪元素定位 */
.field {
  position: relative;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* 移动端+平板端适配（宽度≤900px） */
@media screen and (max-width: 900px) {
  /* 只读状态下显示中间省略 */
  .field[readonly] {
    overflow: hidden;
    white-space: nowrap;
    /* 调整文本方向，让后半部分内容显示在左侧 */
    direction: rtl;
    text-align: left;
  }

  /* 用伪元素添加中间省略号，覆盖中间文本 */
  .field[readonly]::after {
    content: "...";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff; /* 背景色和输入框一致，避免透显下方文本 */
    padding: 0 4px;
  }

  /* 编辑状态下取消省略效果，恢复正常显示 */
  .field:not([readonly]) {
    direction: ltr;
  }
  .field:not([readonly])::after {
    content: none;
  }
}

方案2：JS辅助实现（精准控制省略长度） #

如果需要更精准地控制前后保留的字符数，可通过JS动态生成带中间省略的显示文本，但要注意只修改显示内容，不修改输入框的真实value：

// 生成中间省略的文本函数
function getMiddleEllipsisText(text, maxShowLength = 18) {
  if (text.length <= maxShowLength) return text;
  const keepLength = Math.floor((maxShowLength - 3) / 2);
  return `${text.slice(0, keepLength)}...${text.slice(-keepLength)}`;
}

// 窗口大小变化时更新显示
function updateInputDisplay() {
  const isMobileTablet = window.innerWidth <= 900;
  $(".field").each(function() {
    const $input = $(this);
    const originalValue = $input.data("original-value") || $input.val();
    if (isMobileTablet && $input.prop("readonly")) {
      // 只读状态下显示截断后的文本
      $input.val(getMiddleEllipsisText(originalValue));
    } else {
      // 编辑/非移动端时恢复原始值
      $input.val(originalValue);
    }
  });
}

// 初始化：存储原始值到data属性
$(".field").each(function() {
  $(this).data("original-value", $(this).val());
});

// 监听窗口resize
$(window).on("resize", updateInputDisplay);
// 页面加载时执行一次
updateInputDisplay();

对应的CSS可以简化为：

@media screen and (max-width: 900px) {
  .field[readonly] {
    white-space: nowrap;
    overflow: hidden;
  }
}

二、保证提交的是完整值 #

不管用哪种方案，核心是不要修改输入框的真实value（或用data属性/隐藏字段存真实值），这样表单提交时，输入框的value始终是原始内容或用户修改后的完整内容。

结合你原来的编辑逻辑，调整后的JS代码如下：

// 点击输入框进入编辑状态，恢复完整文本
$(".long-value-input").on("click", function() {
  const $input = $(this);
  $input.prop("readonly", false);
  // 方案2需恢复原始值，方案1可省略此行
  $input.val($input.data("original-value"));
  $input.focus();
});

// 可选：失去焦点后重新设为只读，恢复省略效果
$(".long-value-input").on("blur", function() {
  $(this).prop("readonly", true);
  // 方案2需重新更新显示，方案1可省略此行
  updateInputDisplay();
});

完整示例代码（纯CSS方案版） #

<input type="text" class="field long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".long-value-input").on("click", function() {
  $(this).prop("readonly", false);
  $(this).focus();
});

$(".long-value-input").on("blur", function() {
  $(this).prop("readonly", true);
});
</script>
<style>
.field {
  position: relative;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

@media screen and (max-width: 900px) {
  .field[readonly] {
    overflow: hidden;
    white-space: nowrap;
    direction: rtl;
    text-align: left;
  }

  .field[readonly]::after {
    content: "...";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 4px;
  }

  .field:not([readonly]) {
    direction: ltr;
  }
  .field:not([readonly])::after {
    content: none;
  }
}
</style>

备注：内容来源于stack exchange，提问作者majo majo