집 > 기사 > 웹 프론트엔드 > 기본 콘텐츠를 추가해야 하는 HTML의 텍스트 영역 입력 상자 프롬프트에 대한 완벽한 솔루션

기본 콘텐츠를 추가해야 하는 HTML의 텍스트 영역 입력 상자 프롬프트에 대한 완벽한 솔루션

黄舟원래의: 2017-07-19 17:38:5610188검색

텍스트 영역 입력 상자 프롬프트 텍스트에 대한 완벽한 솔루션, 기본 콘텐츠를 추가해야 함

<input>에는 자리 표시자 태그가 있고 프롬프트 텍스트를 추가할 수 있지만 <textarea> code>아니요. 일반적으로 우리는 아래와 같이 <code><textarea></textarea> 외부에 프롬프트 콘텐츠를 작성합니다. <input>有placeholder标签，可以添加提示文字，但是<textarea></textarea>没有，一般来说我们是把提示内容写在<textarea></textarea>外面，如下图：
기본 콘텐츠를 추가해야 하는 HTML의 텍스트 영역 입력 상자 프롬프트에 대한 완벽한 솔루션

当然，这样的布局并不是最想要的效果，
最想要的是文字显示在输入框内，点击输入框时隐藏，离开输入框时，如果输入框没有内容，又显示提示:

网上搜到的都是利用js通过获取或失去焦点来设置textarea的内容，这有个最大的问题就是：因为设置了默认内容，如果用户不点击输入框，直接提交，就把默认的提示内容提交到后台了。

本人想出来的解决方案是：将提示内容写在一个p中，通过css的position属性来控制，将p显示到<textarea></textarea>中，点击<textarea></textarea> 여기에 그림 설명 쓰기
기본 콘텐츠를 추가해야 하는 HTML의 텍스트 영역 입력 상자 프롬프트에 대한 완벽한 솔루션 물론 이 레이아웃은 가장 원하는 효과는 아닙니다.

우리가 가장 원하는 것은 입력 상자를 클릭하면 입력 상자가 숨겨집니다. 입력 상자를 떠날 때 입력 상자에 내용이 없으면 프롬프트가 표시됩니다.

인터넷에서 찾은 모든 항목은 js를 사용합니다. 포커스를 얻거나 잃어 텍스트 영역의 내용을 설정하는 것이 가장 큰 문제입니다. 문제는 기본 내용이 설정되어 있으므로 사용자가 입력 상자를 클릭하지 않고 직접 제출하면 기본 프롬프트 내용이 제출된다는 것입니다. 배경으로. 🎜🎜제가 생각해낸 해결책은 p에 프롬프트 내용을 작성하고, CSS의 위치 속성을 통해 제어하고, <textarea></textarea>에 p를 표시하고, <textarea> </textarea>를 p에 숨기면 사용자가 직접 제출하기 위해 입력 상자를 클릭하지 않아도 기본 프롬프트 텍스트가 배경에 제출되지 않습니다. 🎜🎜🎜

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>解决textarea输入框提示文字，必须添加默认内容</title>
        <style type="text/css">
             body{font-size:12px;}
             p,p{margin:0;padding:0}             
             .textarea{            
             width:350px;height:80px;position:absolute;background:none;z-index:9
            }             
            .note{             
            position:absolute;line-height:20px;padding:3px 5px;            
             }
        </style>
    </head><body>
    <p style="position:relative;">
        <textarea class="textarea" onfocus="document.getElementById(&#39;note&#39;).style.display=&#39;none&#39;" onblur="if(value==&#39;&#39;)document.getElementById(&#39;note&#39;).style.display=&#39;block&#39;"></textarea>
        <p id="note" class="note">
            <font color="#777">在这里写入你对服务商的额外要求，服务商等级，好评率等</font>
        </p>
    </p></body>
 </html>

🎜 🎜

위 내용은 기본 콘텐츠를 추가해야 하는 HTML의 텍스트 영역 입력 상자 프롬프트에 대한 완벽한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：HTML의 다양한 양식 스타일 소개다음 기사：HTML의 다양한 양식 스타일 소개