江苏龙网

  1. 主页 > 生活百科 > >

css怎么用，divcss布局经典实例( 五 )


步骤14:使用提示信息可见
此时，提示信息被折叠，不可见 。我想大家都想到了 。如何使用:placeholder-showed使其可见？大多数浏览器会显示占位符文本，直到用户在输入中输入一个真值 。为了提高用户使用表单的体验，如果在输入获得相应的焦点后占位符文本不被隐藏，岂不是更有趣，对用户更有帮助？毕竟我们不希望用户发送空的消息，所以我们可以关联这个行为，只在用户输入值时显示提示信息(
:placeholder-showed表示占位符文本可见，但当提示信息可见时，占位符文本不可见，即输入有实值 。换句话说，我们需要一个反转:占位符-显示(占位符文本不可见) 。这时候可以借助:not()选择器来帮助我们做这个反演 。
。input:not(:placeholder-showed)+提示{
max-height:2em；
}
将max-height设置为font-size的两倍:10px，其中使用2em 。这时候就可以扩展升信信息块了 。简单整洁 。如果这个看似普通的伪类选择器能够通过最终的规范，那么我们将会看到一些巧妙的应用 。走到这一步，效果就变成了:
自己体会一下 。你可以在input里面随便输入一点内容，哪怕是空，就可以看到提示信息显示:
无论:focus-within还是:placeholder-displayed，都是CSS选择器新增的伪类选择器 。如果你有兴趣，建议你花点时间了解一下这几个方面:
Focusing on Focus Styles A CSS Approach to Trap Focus Inside of an Element CSS :focus-within CSS :focus-within via @w3cplus :placeholder-shown Visually validate an input field using CSS Intriguing CSS Level 4 Selectors The Future Generation of CSS Selectors: Level 4 下一代选择器：CSS4 即将推出的CSS4 Level 4 Selectors CSS Level 4 Selectors to Watch Out For第十五步:让它充满活力
到目前为止，我们已经通过简单的HTML和一些CSS特性，完成了一个具有聊天功能的新闻提要的基本架构，但目前它毫无生气，只是一个纯粹静态的东西 。也就是说，用户不用它做任何事情 。这个案例包含了一些有趣的CSS新特性，但是DOM直到现在还不能修改 。如果想让这个案例更生动，就需要一些JavaScript函数，让用户可以通过聊天框添加消息 。
首先，您需要向类名的子元素ul添加一个ID 。消息，以便JavaScript可以更好地获取相应的元素 。同时，向input元素添加一个必需的属性 。当用户不输入任何信息时，表格可以被自动检查 。
type="text" id="input "必需…
然后创建一个名为script.js的文件，放在前面 。但是，我们的案例是在Codepen上的相应演示，所以不需要考虑创建单个 。js文件 。
步骤16:添加一些JavaScript代码
我们需要添加一个事件函数，当监听键盘的Enter事件时，获取输入的值(如果有效)并将其添加到消息列表的末尾，清除该字段并滚动到消息的底部 。
//获取相应的元素
constinput = document . getelementbyid(' input ')；
constmessages = document . getelementbyid(' messages ')；
//监听输入的键盘事件
input . addevent listener(' keypress '，(event) => {
//检查是否按下了Enter键 。
if(event 。keyCode === 13) {
//检查字段是否有效
if(input . validity . valid){
//使用该值创建DOM元素
constmessage = create message(input 。值)；
//将新创建的DOM元素添加到消息列表中
messages . appendchild(message)；
//清除输入框的值
输入 。值= "；
//滚动到消息列表的底部
messages . parent node . scroll top = messages . parent node . scroll height；
}
}
});
//将输入的值转换为HTML字符串
函数create message(value){
returnstring todom(` class = " message " > $ {value} `)
}
//将字符串转换为真实的DOM
函数string todom(string){
consttemplate = document . createelement(' template ')；
template . innerhtml =string 。trim()；
returntemplate . content . first child；
}
现在，当您在input中输入一个字段并按Enter时，您将看到您输入的消息被添加到消息列表的底部 。
步骤17:添加附加消息
为了向您展示最后一个新的CSS功能- contain ，我们需要做一些设计 。我们将实现一个效果，在消息列表顶部的框中显示发送新消息的时间 。当您将鼠标悬停在消息上时，将会产生这种效果 。
首先，我们需要将这些信息添加到新消息中 。我们可以修改createMessage函数返回的值 。
函数create message(值){
returnstring todom(` s
新日期() 。toString()}"> ${value}
`);
}
你已经注意到一个新的类message-mine已经被添加到message中 。并将相应的样式添加到该类中:


推荐阅读


上一篇：知识付费市场规模，2020知识付费发展前景

下一篇：青年创业基金在哪里申请，创业基金申请条件与流程