textarea之placeholder

placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password.这个属性是html5才有的新属性,原来的HTML 4.01 与 HTML 5 之间有差异. 但是textarea的placeholder 为什么有时候显示不出来呢? 像这样 1.显示 2.不显示 <textarea placeholder="请输入备注信息"> </textarea> <…

微信小程序 fixed 解决 textarea 的 placeholder 不固定问题

当我们把 textarea 放到一个 position:fixed; 中的元素中时. 会发现这个 textarea 也会跟着固定位置,但是 textarea 的 placeholder 内容不会固定,当滚动页面时,placeholder 的内容会跟着滚动. 如图所示,textarea放在 fixed定位的元素中上下拖动问题解决方案 <textarea type='text' fixed> 加入 fixed 就行啦…

HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式兼容性代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:lightgray; } input:-moz-placeholder, textarea:-moz-placeholder { …

微信小程序 textarea的placeholder层级过高在弹层之上 bug解决方法

微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路我的思路是 : 在弹层弹出的时候 , 用JS将textarea的value值设置为 " " . 这样placeholder就不会显示 , 然后 value为" " 也不会遮挡弹层 . 然后在弹层收回的时候, 判断textarea的value值, 如果为 " ".…

jquery如何实现（textarea） placeholder自动换行？

思路:利用文本框的聚焦和失焦事件 1.HTML结构 <textarea id="text1"></textarea> 2.js方法 <script> var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示'; $('#text1').val(placeholder); $('#text1').focus(function() { if ($(this).val() == placeholder) { $(this).…

TextArea里Placeholder换行问题

页面上使用TextArea控件时,会时不时的想给个提示,比如按照一定方式操作之类的.正常情况下,会使用Placeholder,但这样的提示是不会换行的,无论是用\r\n,还是用<br/>,都不起作用. 前段时间碰到这个问题,一直没有解决,所有页面上的Placeholder都是一行到底,丑死了. 无意中,一个朋友提供了一个方法,完美的解决了问题,贴出来和大家分享一下: <textarea id="></textarea> <textarea id=&quo…

修改input和textarea的placeholder的颜色，限制文本框字数输入

textarea的placeholder属性内容折行显示(PC和移动端端)

1.PC端折行方法 placeholder="字体字体" 可以使其折行显示 2.移动端折行方法 webkit内核 textarea::-webkit-input-placeholder:after{ display:block; content:"line@ \A line#";/* \A 表示换行 */ color:red; }; 火狐 textarea::-moz-placeholder:after{ content:"line@ \A line…

input和textarea修改placeholder颜色和字号

方式1因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea).::-webkit-input-placeholder { /* WebKit browsers */color:#999;font-size:16px;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#999;font-size:16px;}::-moz-placeholder { /* Mozilla…

textarea placeholder文字换行

要实现这样的效果第一反应是直接在placeholder属性值里输入\n换行,如: <textarea rows="5" cols="50" placeholder="1.textarea\n2.success"></textarea> 浏览器直接输出了它解决方法是换成 <textarea rows="5" cols="50" placeholder="1.text…

textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

1.textarea自适应高度,placeholder使用图标自适应高度,有很多种办法: 1)jq: $("textarea").on("input",function(){ $(this).css({ 'height':'auto', 'overflow-y':'hidden' }).height(this.scrollHeight); }) 效果图: 2)使用插件:autosize,flexText等...插件肯定比一两句话的jq强大的多,或者是:这篇文章 …

textarea 元素的 placeholder 属性不显示

<textarea> 标签定义多行的文本输入控件. placeholder:描述文本区域预期值的简短提示. textarea 的 placeholder 属性值不显示的原因可能是 <textarea>与</textarea> 之间存在空格或者换行上图写法效果对应下图 textarea扩展: textarea 默认是可以拉伸的,但是一般拉伸 textarea 会使页面变的不美观. 可以通过下面两个方式固定大小 1.彻底禁止拖动 resize: none; 2.使用CSS…

如何让textarea placeholder 文字垂直居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #textArea { color: white; height: 50px; } #textArea::-webkit-input-placeholder{ height: 50px;line-he…

IE10/11克隆textarea时 bug

重现代码 <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <script type="text/javascript"> var ta= document.createElement('textarea') ta.placeholder = 'text' var clone = ta.cloneN…

【JS】IE兼容placeholder

直接上代码: $(document).ready(function () { var doc = document, textareas = doc.getElementsByTagName('textarea'), supportPlaceholder = 'placeholder' in doc.createElement('textarea'), placeholder = function (textarea) { var text = textarea.getAttribute('pl…

IE8兼容placeholder的方案

用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失,placeholder可作为输入框的提示文案如图: placeholder是常用的属性,它使得input框内有很友好的提示效果.高版本浏览器都支持placeholder属性,但IE9以下版本的浏览器并不支持这一属性.这里用JavaScript实现添加对浏览器…

contenteditable元素的placeholder输入提示语设置

在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable. 然后可能需要像input.textarea有placeholder的输入提示语,但contenteditable的元素,placeholder是没用的,需要另外办法. 例子: HTML: <div class="con" contenteditable="true"></di…

placeholder插件详解

placeholder插件是用来实现input或者textarea文本框显示默认文字的功能,当获得焦点时,默认文字消失.用户按删除键,把输入的字符删除掉,并失去焦点时,默认文字又出现等功能.使用此插件,只需要$("input").placeholder();这input元素,必须有placeholder属性,属性值就是input默认显示的文本,而且input元素中的class属性值中没有placeholder值,此插件也是基于jQuery的. 再看源码之前,我先讲一个知识点: 如果我们…

移动端的坑之在可编辑的div中实现placeholder

1.当我们个 div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现 placeholder 直接写上去是没有效果的 <div contenteditable="true" placeholder="please write infomation"></div>//没有效果 2.可以添加样式来实现 *[contenteditable="true"]:e…

placeholder IE兼容，显示password

从网上找了很多关于placeholder IE兼容性的问题,下边的这个js方法可以显示password. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Placeholder Polyfill Test</title> </head> <body> <form> &l…

placeholder 设置换行三种方式

在 html 中编写代码时保留代码换行 <textarea name="" id="" cols="30" rows="10" placeholder="携程旅行网爱奇艺巴西"></textarea> 使用设置换行设置回车 <textarea name="" id="" cols="30" row…

富文本编辑器Simditor的简易使用

最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是地址,由于里面有些demo和代码实例,我就不再赘述了.直接到官网下载到zip包,解压会有下面的东西我们将这些东西全部引入我们的项目中,在自己的html页面引入,大致如下初始化SimDitor只用在html页写一个textarea标签和javascript写入初始化就行了 var editor =…

css 填坑常用代码分享

以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/master/css.md 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all;…

jQuery Validate 表单验证 — 用户注册简单应用

相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接-->,http://pan.baidu.com/s/1o8zVdoQ 1.Demo讲解(validate参数见第3点) 1.1 Validate 要依赖jQuery的,所以HTML中js的引用关系如下: <script type="text/javascript" src=".…

点燃圣火！ Ember.js 的初学者指南

现在,到处都可以看到复杂的 JavaScript 应用程序. 由于这些应用程序变得越来越复杂,一长串的 jQuery 回调语句,或者通过应用程序在各个点执行不同的函数调用,这些都变得无法再让人接受. 这导致了 JavaScript 开发人员了解到传统的软件程序员已经知道了几十年的问题: 组织和效率非常重要,并且可以对应用程序的性能是否优异产生重大影响. 实现组织和效率的其中一个最常用的架构模式,被称为 Model View Controller (缩写为 MVC) . 这种模式鼓励开发人员将其应…

移动开发tip

input点击出现背景色和边框,加入样式 -webkit-tap-highlight-color: rgba(255,255,255,0); ios下按钮糊掉,样式表不怎么起作用,使用-webkit-appearance:none;消除ios的默认样式: 如果页面的底部栏设置position:absolute,且页面有input框,当用户点击输入时,会出现底部栏被顶起的情况,这时候把底部栏的高度计算出来吧,不要position:absolute,即可解决. 如果要给input加个背景图标,并且i…

html5新增及废除属性

html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定autofocus属性.它以指定属性的方式让元素在页面加载后自动获得焦点.一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效. 这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了autofocus,页面打开即…

2015年---移动端webapp知识总结

没想到这样又过了5个月了,近期辞职了,所以我有时间来做总结. 这段时间里我学习了很多东西,而且都是我们移动端webapp的同学值得去学习的. 我先告诉大家我这次写的总结,有以下内容: 1.body的背景图,img图片自适应,切图小技巧. 2.字体rem自适应问题. 3.@media的断点分析. 4.页面布局:盒子模型. 5.CSS3选择器和H5新标签的使用. 6.表单常用的正则验证. 7.CSS3的变形,渐变,动画. 以下是去取原生样式的方法. 8.单选多选去掉原生方法. 9.select下拉框…

python_way day19 HTML-day5 （form表单验证，CSRF,cookie，session,缓存）

python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存一,django表单验证功能 1.django验证基础: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>django form</title> </hea…

HTML5新增的属性和废除的属性

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性对input(type=text).select.textarea与button指定autofocus属性.它以指定属性的方式让元素在画面打开时自动获得焦点. 对input(type=text).textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容. 对input.output.select.textarea.button与fieldset指定form…

【textarea之placeholder】的更多相关文章