文本小部件是一个文本输入字段,用户可以在其中使用编辑器中的一系列控件设置文本样式。每个控件都将 CSS 属性应用于文本。从用户的角度来看,它看起来像是一个用于输入文本的普通字段,但其看似简单的背后却隐藏着大量复杂的流程。有几种方法可以在 Web 上实现文本输入字段。我们可以使用简单的文本字段,或多行textarea元素,或contenteditable使输入可编辑的属性,或document.designMode = on. 它们有何不同?
借助这两个表,我们可以满足所有需求:使用可变字体属性和各种字体特征。结果数据显示在编辑器的文本小部件控件中,用户可以在其中设置文本样式而无需使用任何代码。
文本输入是文本小部件用户体验的最重要方面之一。除了启用处理文本的快捷方式外,我们还必须应对一些不寻常的挑战。使用箭头键导航文本绝对是其中之一。
文本选择可帮助用户查看当前正在编辑的文本。让我们尝试一个简单的例子:一个带有按钮的输入字段来控制文本的粗细。在这个例子中,我们可以选择一段文本并按下Bold按钮,然后文本中的选择将保留。但是如果我们的例子更复杂怎么办?假设我们向文本大小选择器添加了一个输入字段。在这种情况下,焦点将转移到新的输入。
解决此问题有两种选择:
在每个输入事件之后,我们强制焦点移回文本块。在这种情况下,选择会在一定数量的输入事件后开始闪烁——我们不希望这样。我们可以将文本块添加到iframe. 您可能知道, aniframe有自己的全局window对象。因此,只要选择在 范围内iframe,即使焦点在外部移动,它也会持续存在。
我们最终得到了一个iframe-wrapped 文本小部件。因此,只要选择在 范围内iframe,即使焦点在外部移动,它也会持续存在。看看下面的截图。我们在页面上有两个选择:文本小部件中的选定片段和控件中文本大小的选定值。
热门标签: webhivers 维仆签约 深圳外贸网站建设 网站设计公司 网页设计 网页 企业网站建设 深圳网站制作公司 佛山网站设计建设公司 产品展示型网站 广州网站设计建设公司 seo优化 网站优化 企业网站设计公司
相关标签: 网站开发