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(占位符)文本。 演示地址:...
在网页设计中,"带图标的input输入框"是一个常见的交互元素,它通过结合图标与文本输入框,提升用户界面的美观度和易用性。这样的设计可以使用户更直观地理解输入框的目的,例如,一个搜索图标常用于搜索框,锁型...
在Bootstrap布局中,我们经常需要在input输入框的右侧添加一些功能性的图标,例如清除按钮或切换密码可见性的图标。然而,Bootstrap默认情况下,并不直接支持这些图标触发点击事件。这是因为图标通常作为字体图标...
在网页设计中,为了增强用户体验或者提供更直观的指引,我们常常会在`input`元素的右侧添加图标。这种做法能够帮助用户理解输入框的目的,比如用于手机号码输入时,可能会添加电话图标。本文将详细解释如何使用CSS...
8. 根据`visible2`的值,动态地渲染两个`el-input`组件,一个使用`type="password"`来隐藏输入内容,另一个使用`type="text"`来显示内容。 9. 对应的图标也被赋予不同的类名来显示“显示密码”或“隐藏密码”的图标...
React本机文本输入效果我遇到了Codrops创建和的文本输入,并... 使用最新版本: $ npm install react-native-textinput-effects --save 如果您使用的是本机较旧的版本,则可以坚持使用0.4版: $ npm install react-nati
在网页设计中,为了优化用户体验及提升界面美观度,经常会遇到需要在`input`框旁边或内部加入图标按钮的情况。例如,一个登录表单中的“显示密码”按钮或者搜索框旁边的放大镜图标。本文将详细介绍如何在`input`框中...
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); ``` 在"CoordinatorDemo"这个子项目中,可能还会涉及`CoordinatorLayout`的使用,它是Android的布局管理器,可以...
将新创建的皮肤类与自定义组件关联,可以在组件类中设置skinClass属性,或者在MXML中通过skinClass属性指定皮肤类。 7. **测试和优化**: 使用Flex Builder或命令行工具编译并运行CustomComponentSkinTest应用...
在Bootstrap 3中,设计者和开发者经常需要在输入框(input)内或旁边添加图标,以增强界面的视觉效果和用户体验。本文将详细介绍如何在Bootstrap 3的input输入框中插入glyphicon图标。 Glyphicon是Bootstrap 3中内置...
9. 编辑框图标:edit_text、editbox_background、editbox_background_、editbox_dropdown_dark、editbox_dropdown_line 这些图标用于表示编辑框的样式,包括文本框、背景、下拉菜单背景等。 10. 图库图标:gallery_...
在网页设计中,为了提升用户体验和界面美观度,经常会在`<input>`元素中添加小图标,例如搜索图标、提示图标等。本文将详细介绍两种在JS中为`<input>`添加小图标的常见方法。 ### 方法一:背景图片法 这种方法是...
String inputText = usernameEditText.getText().toString(); // 切换密码可见性 TextInputLayout passwordInputLayout = findViewById(R.id.password_input_layout); passwordInputLayout....
android:inputType="text"/> ``` 要添加清除图标,我们可以使用`android:drawableEnd`或`android:drawableRight`属性(对于右对齐的图标),这样当有内容输入时,图标会显示在文本右侧。例如,可以添加一个资源ID...
`type="password"`属性确保在浏览器中默认显示为星号或圆点,隐藏实际输入的字符。 ```html <input type="password" id="passwordInput" placeholder="请输入密码"> ``` 接下来,我们创建一个小眼睛图标,作为显示...
<input type="text" id="layui-input-tag" class="layui-input layui-input-tag"> ``` **二、CSS样式** 为了让tag看起来更像一个标签,我们需要添加一些自定义的CSS样式。Layui本身提供了一些基础样式,但可能需要...
接下来,在需要显示“眼睛”图标的元素上设置对应的CSS类,例如`fa fa-eye`,并配合JavaScript事件监听来控制显示和隐藏密码: ```html <input type="password" id="password" /> <button class="show-hide"><i ...