简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于用div实现的placeholder的不足？
阿神
阿神 2017-04-11 09:40:07
0
1
641

现在很多网站比如知乎的评论功能都是用p而不是textarea。

但如果我按照下面这样做的话，会存在鼠标不会像真正的placeholder那样和文字对齐的情况。请问知乎是怎么实现的，怎样避免出现我这种情况？

Stackoverflow上面一个类似的问题，line-height:normal也解决不了问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    p {
        width:600px;
        border: 1px solid red;
        // line-height: normal;
        line-height: 200%;
        padding-left: 5px;
    }
        
    p:empty:before {
        content: attr(placeholder);
        display: block;
        color: #999;
    }
  </style>
</head>
<body>
  <p contenteditable="true" placeholder="输入用户名"></p>
</body>
</html>
阿神
阿神

闭关修行中......

모든 응답(1)
PHPzhong
PHPzhong2017-04-11 09:42:07 1층

看了下stackoverflow的答案,line-height: normal;确实可以解决此问题。去掉line-height:200%。
如果你想挤开边距，使用padding或者规定一个较大的高度

-------update.11.28
看了下fb的dom结构，fb的输入框的高度并没有设置，而是给父级元素min-height，子元素自适应高度。

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！