bind-html自动换行,如何实现textarea placeholder自动换行?
以前的博文,直接 COPY 上来了。
在 HTML5 placeholder 中,意为占位符。常会在表单中用一些简单的单词进行提示,友好的提示用户录入数据。
在 W3C 中,定义占位符为一个简单的提示(一个词语或一个短语),在帮助用户进行数据录入。若想录入较长的提示,建议在当前操作旁注明提示信息,而不是使用 placeholder。
The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters.
For a longer hint or other advisory text, place the text next to the control.
倘若硬是想在 textarea 标签中使用 placeholder 属性去实现换行文字提示的话,有什么办法实现呢?
于是有了以下尝试:
直接添加各种换行符是不可行的
一开始我以为,直接加上换行符就能实现,于是乎有了下面的结果:
html
万能的 CSS
方法一
css/* WebKit browsers */
::-webkit-input-placeholder {
color: transparent;
}
::-webkit-input-placeholder:before {
display: block;
color: #999;
content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A";
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
color: transparent;
}
:-moz-placeholder:before {
display: block;
color: #999;
content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A";
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
color: transparent;
}
::-moz-placeholder:before {
display: block;
color: #999;
content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A";
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
color: transparent;
}
:-ms-input-placeholder:before {
display: block;
color: #999;
content: "第一行文本提示 \A 第二行文本提示 \A 第三行文本提示 \A";
}
方法二
css* WebKit browsers */
::-webkit-input-placeholder:after {
display: block;
content: "第二行文本提示 \A 第三行文本提示 \A";
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder:after {
display: block;
content: "第二行文本提示 \A 第三行文本提示 \A";
}
/* Mozilla Firefox 19+ */
::-moz-placeholder:after {
display: block;
content: "第二行文本提示 \A 第三行文本提示 \A";
}
/* Internet Explorer 10+ */
:-ms-input-placeholder:after {
display: block;
content: "第二行文本提示 \A 第三行文本提示 \A";
}
万能的 JavaScript
javascript// required jQuery
var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示';
$('textarea').val(placeholder);
$('textarea').focus(function() {
if ($(this).val() == placeholder) {
$(this).val('');
}
});
$('textarea').blur(function() {
if ($(this).val() == '') {
$(this).val(placeholder);
}
});
bind-html自动换行,如何实现textarea placeholder自动换行?相关推荐
- 实现textarea不自动换行
要实现textarea不自动换行,只需要加个样式就ok style="word-wrap:normal;"
- html让一个文案自动换行,word-wrap break-word使文本自动换行
在内容属性那里加上word-wrap: break-word; 如果右边留白太多的话,可以用word-break : break-all; <使用word-wrap:break-word使文本自 ...
- ie浏览器中 textarea 不能自动换行
由于在谷歌浏览器自动换行没有问题,我们可以在ie控制台和谷歌控制台比较一下各自的属性,发下ie缺少了 white-space:pre-wrap; 在style里加上后发现ie也可以自动换行了
- idea 未实现接口红线提示,重复代码波浪线提示,自动换行,控制台输出内容自动换行...
01,Could not autowire. No beans of 'UserMapper' type found 01.1,问题描述,通过反射动态实现的接口在调用时会出现以上提示,常见的如 ORM ...
- html 英文自动换行,CSS让英文单词的自动换行
在制作网页过程中,css样式编写中,可能会遇到文字换行的问题,其中英文换行可能会困扰着很多初学者,而今天我就这个问题进行相应的阐述,学过css的朋友应该都知道,控制文字是否换行可以直接使用css中的w ...
- php生成图片表格自动换行_PHP GD库生成图片自动换行函数,自动分页函数
/* 文字自动换行 * @param $card 画板 * @param $pos 数组,top距离画板顶端的距离,fontsize文字的大小,width宽度,left距离左边的距离,hang_siz ...
- html怎样让文字自动换行,CSS怎么设置文字自动换行?
CSS怎么设置文字自动换行?下面本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)自动换行的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 关于换行问题,正常字符的换 ...
- html中不允许自动换行,html中div不自动换行、强制不换行的具体实现方法
本文为大家介绍下html 中p不自动换行的多种实现,如可以使用nobr标签实现不换行,用nowrap元素等等,感兴趣的朋友可以参考下 1.用标签实现不换行 代码如下: Hello world! Hel ...
- android 自动换行linearlayout,Android LinearLayout实现自动换行效果
Android LinearLayout实现自动换行效果 发布时间:2020-09-13 14:19:34 来源:脚本之家 阅读:431 作者:星辰之力 在我们开发过程中会经常遇见一些客户要求但是An ...
最新文章
- TMAXug ATPG Design Flow
- 内核驱动漏洞与攻击预防--by MJ0011
- vc编程中出现 fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include stdafx.h”?...
- TF实战:(Mask R-CNN原理介绍与代码实现)-Chapter-8
- python 滑块验证码_python selenium 淘宝滑块验证码 问题
- matlab数字通信,基于matlab时分复用数字通信系统的设计与实现.pdf
- python网络编程之 一 socket(套接字)
- inject 响应式_Vue 3 组合式 provide/inject
- PE知识复习之PE的导入表
- 记忆网络之在对话系统中的应用
- 欧拉角Yaw、Pitch、Roll
- 2021年山东省安全员C证最新解析及山东省安全员C证证考试
- Pray for 京阿尼——愿逝者安息,伤者早日康复
- 新浪短网址API接口的获取以及API接口的调用文档分享
- handler机制,成功跳槽百度工资从15K涨到28K,挥泪整理面经
- 这些用例设计题,你在面试时遇到过吗?
- 什么叫h5项目_HTML5和H5是一个意思吗
- 最佳Outlook 2007改进-包括日历
- apache更改网站目录
- 盘点NBA历史上最强球员前十排行榜:沙奎尔·奥尼尔