Курсор в contenteditable

#javascript #html #jquery #css

Если в первый раз кликнуть на div contenteditable то курсор становится где-то вверху,
при наборе текста, он становится на правильное место. Как можно пофиксить этот момент?
Что бы и в первый раз курсор ставился по середине (по вертикали)? Заранее спасибо! 

Демка http://jsfiddle.net/0gr09835/1/



div.msg {
  font-size: 16px;
  float: left;
  width: calc(100% - 80px);
  height: 64px;
  line-height: 64px;
  padding: 0 10px;
  color: #1a1a1a;
  border: 0;
  background-color: transparent;
  outline: none;
  font-weight: 400;
  border: 1px solid #000;
  margin-top: 25px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  /* For Firefox */
}

[contenteditable=true]:empty:focus:before {
  content: "";
}





P.S. Баг обнаружен в FireFox в Chrome вроде нормально всё.
    

Ответы

Ответ 1

Я бы лично решил так....



div.wrapper {
  position: relative;
  width: 200px;
  height: 64px;
  background-color: transparent;
}

div.msg {
  z-index: 10;
  position: absolute;
  width: calc(100% - 20px);
  height: 100%;
  line-height: 64px;
  padding: 0 10px;
  color: #1a1a1a;
  background-color: transparent;
  border: 1px solid #000;
}

div.msg:focus~span {
  display: none;
}

span {
  z-index: -1;
  display: inline;
  width: 100%;
  height: 100%;
  position: absolute;
  line-height: 64px;
  padding-left: 20px;
}

  

  Написать сообщение...