package
{
import flash.display.DisplayObject;
import mx.controls.Image;
import mx.controls.TextInput;
import mx.core.mx_internal;
use namespace mx_internal;
public class MyTextInput extends TextInput
{
private var _image:Image;
public function MyTextInput()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
_image = new Image();
_image.source = "search.png";
addChild(DisplayObject(_image));
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this._image.width = 16;
this._image.height = 16;
this._image.x = 0;
this._image.y = (this.height - this._image.height)/2;
this.textField.x = this._image.width+2;
this.textField.y = (this.height - this.textField.height)/2;
this.textField.width = this.width - this._image.width-5;
//this.setStyle("paddingLeft",this._image.width+2);
}
}
}
比较简单的实现方式了,不过在网上很少查到。这个还是在外网blog上查到的,自己修改了下,本身它是仿照mac 的搜索做的图标在右边,改成左边了。谁要有跟好的解决方案,拿出来研究下啊!!!!o(∩_∩)o 哈哈
分享到:
相关推荐
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
React本机文本输入效果我遇到了Codrops创建和的文本输入,并... 使用最新版本: $ npm install react-native-textinput-effects --save 如果您使用的是本机较旧的版本,则可以坚持使用0.4版: $ npm install react-nati
bootstrap3如何在input输入框插入glyphicon图标呢?插入图标看起来比较醒目,满足用户体验价值观,此功能应用于各大网站。 怎么把图标放在输入框的开头?? ...<span class=glyphicon></span> ...input type=text
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法。 方法一 将小图标当做input的背景来插入,直接上代码吧: <style type=text/css> *{ margin: 0; padding: 0; } ...
复制代码代码如下: <input class=’phone-input’ type=”text” id=”phone”/> .phone-input{ padding-right:20px; background:url(“resource/***.gif”) no-repeat scroll right center transparent; }
从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本。 对于type=”password”的 input 则会在右方显示一个小眼睛的图标,占击这个图标可以显示已经...
支持配置清除图标且不会占用CompoundDrawables的位置 演示程序 下载 快照 引入 添加如下依赖到你的 build.gradle 文件: repositories { ... maven { url 'https://jitpack.io' } } dependencies { implementation...
input type="text" placeholder="Type here..." /> <li> <input type="text" placeholder="Type here..." /> <li> <input type="text" placeholder="Ty[......] 阅读全文>>
这是因为 Ctfmon.exe 控制 Alternative User Input Text Processor (TIP) 和 Microsoft Office 语言条,提供语音识别、手写识别、键盘、翻译和其它用户输入技术的支持。这个程序没有启动也会造成输入法图标不显示。 ...
stampicon inputfile.png --output outputfile.png --text "text to overlay" 选项 意义 - 文本 要覆盖的文字,必填 - 输出 要写入的文件,必填 -字体 字体系列,例如,默认为“ Helvetica” --textcolor 十六...
React input field 是一个为你处理输入组件的 react 组件演示: : ###特性类型 - 'default' 或 'withIcon' name - onChange 事件的标识符 (id) label - 要显示的标签value - 如果指定了默认值iconText -...
2、input框设置文本缩进,大小为搜索图像大小加上图像左右两边的外边距 准备 只需一个搜索图标图片,类似于下图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
最近在写一个律师推荐前台的网站,在上面搜索框这里出现了问题,我想把搜索的图标放在搜索框里面,但是弄了半天都不大如意…… 话不多说,我们直接进入主题...input type=text placeholder=请输入查找的律师或专长>
我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。 使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。 最后,我们...
在FlexBuilder中设置MXML编译器选项 1.5节.在FlexBuilder外部编译Flex项目 1.6节.在MXML中添加事件监听器 1.7节.设置子节点属性 1.8节.定义数组和对象 1.9节.在ActionScript中设置变量的作用域 1.10节.在...
React Native Expo示例通过简单易懂的示例学习React Native(Expo CLI)。在开发中运行项目设置开发环境: : 。 安装依赖项: yarn install (或...登录屏幕了解如何使用: StatusBar , Expo图标, Image , TextInput
style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display: flex; align-items: center; } .password .fa{ position: absolute; righ
jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表 jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间,设置默认显示日历表展示。jquery日历控件下载。
## Text Input Layout基本实现,显示提示,错误和字符计数。 ##协调器布局## Snackbar示例操作,更改背景和字体。 ## Floating Action Button的行为(SnackbarLayout依赖项) ## AppBar布局基本滚动## Collapsing...