Início / user-4598470

c01gat3's questions

Martin Hope
c01gat3
Asked: 2025-04-11 08:45:57 +0800 CST
  • 5

Tenho uma lista de itens em que um dos atributos pode ser clicado duas vezes e depois editado.

Tenho que usar [contenteditable="true"]em vez de usar uma entrada padrão.

O formato dos dados editáveis ​​também pode incluir uma unidade de medida, por exemplo, "150 mm" .

Atualmente estou usando .select()o que seleciona tudo, incluindo a unidade de medida.

Veja o exemplo aqui https://codepen.io/c01gat3/pen/GgRbwoj

Quero selecionar apenas os valores numéricos ou o comprimento da string menos os caracteres no final.

Gostaria de receber respostas simples em JavaScript ou jQuery para este projeto.

$('body').on('dblclick', '.value', function(){
  $(this).attr('contenteditable', true);
  //*** this is where I need some help   
  $(this).focus().select();
  //How to only select the numbers, not include the "mm"?
  //or how to select (length - 2) characters?
});
$(document).mouseup(function(e){
  var element = $('body').find('.value[contenteditable="true"]');
  if (!element.is(e.target) && element.has(e.target).length === 0){
    $('.value').attr('contenteditable', false);
  }
});
$(document).keypress(function(e) {
  if($('.value[contenteditable="true"]')){
    if(e.which == 13){ //enter
      $('.value').attr('contenteditable', false);
    }
  }
});
.list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  .item{
    display: flex;
    .id{
      width: 20px;
      font-weight: 600;
    }
    &:has(.value[contenteditable="true"]){
      .id{
        color: red;
      }
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <span class="id">1</span>
    <span class="value">100mm</span>
  </div>
  <div class="item">
    <span class="id">2</span>
    <span class="value">2,500mm</span>
  </div>
  <div class="item">
    <span class="id">3</span>
    <span class="value">340mm</span>
  </div>
</div>

javascript