The perfect solution to the textarea input box prompt in HTML that default content must be added-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

The perfect solution to the textarea input box prompt in HTML that default content must be added

黄舟

Jul 19, 2017 pm 05:38 PM

html textarea letter

Perfect solution to textarea input box prompt text, default content must be added

<input>With placeholder tag, prompt text can be added , but <textarea></textarea> does not. Generally speaking, we write the prompt content outside <textarea></textarea>, as shown below:
The perfect solution to the textarea input box prompt in HTML that default content must be added

Of course, such a layout is not the most desired effect.
What we want most is that the text is displayed in the input box, hidden when the input box is clicked, and when leaving the input box, if the input box has no content, a prompt is displayed:

All those found on the Internet use js to set the content of the textarea by gaining or losing focus. The biggest problem is: because the default content is set, if the user does not click on the input box and submits directly, it will The default prompt content is submitted to the background.

The solution I came up with is: write the prompt content in a p, control it through the position attribute of css, display the p in <textarea></textarea>, click <textarea></textarea>, hide it to p, so that even if the user does not click on the input box to submit directly, the default prompt text will not be submitted to the background. The effect is as follows:
The perfect solution to the textarea input box prompt in HTML that default content must be added

<!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>

Copy after login

The above is the detailed content of The perfect solution to the textarea input box prompt in HTML that default content must be added. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn