天道酬勤,学无止境

iOS TextInput displayAsPassword doesn't displayAsPassword

I'm building an app to launch across Android, iOS, and desktop simultaneously. The app includes a login that is attached to a vBulletin system and I've run into a significant issue (that the client is adamant must be fixed). On iOS, if you are typing in a TextInput that has its displayAsPassword set to true, it will show plain text while typing. Once you click out of the TextInput, it displays properly.

Here is the code I am using within Flex

<s:TextInput id="inputField" width="100%" styleName="loginFields" text="Password" focusAlpha="0" focusEnabled="false" autoCorrect="false" />

I then attach focus events to the input field that run these functions.

private var defaultText:String = 'Password';

private var passwordDisplay:Boolean = true;



private function focusIn (e:FocusEvent = null):void {
     if (this.inputField.text == this.defaultText){
            this.inputField.text = '';
      }
     if (this.passwordDisplay){
               this.inputField.displayAsPassword = true;
     }
}

private function focusOut (e:FocusEvent = null):void {
     if (this.inputField.text == ''){
               this.inputField.text = this.defaultText;
               if (this.passwordDisplay){
                      this.inputField.displayAsPassword = false;
             }
      }
}

There's a lot more code in the file, but this is the only relevant. Basically, on focus in, it checks if the text == the default text. If it does, it empties the field. It then sets displayAsPassword to true. On focus out, it checks if the field is empty. If it is, it resets the field to default and displayAsPassword to false. I know the default text is built in, but I needed more functionality than it offered.

Now, this issue (password displaying as plaintext while focus is on field) is present in iOS only and it doesn't occur in the emulator. It works perfectly and as expected on Android and desktop. I've tried recreating the functionality manually (possible but not ideal because caretIndex is not a TextInput property), I've tried hiding the TextInput and overlaying a field of '•' that match the length of the input (not possible because TextInput is StageText). I'm not sure what else I can try here. Any ideas?

Thanks in advance for any help here.

Specs:

  • Built and compiled using FlashBuilder 4.6 (but I also have 4.5.1 available to me)
  • Using Air 3.1
  • Compiled on OS X Lion
  • Tested on both 1st and 3rd gen iPads
  • Using Flex SDK 4.6.0

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 使用 IntelliJ IDEA 12 进行 Flex 开发(Using IntelliJ IDEA 12 for Flex Development)
    问题 我已经使用 Flex / Flash Builder 很多年了。 Flash Builder (4.7) 的最新版本似乎有不少问题,其中最大的是: 不检测 MXML 中的组件ID 。 例如,您无法查找组件 ID 的用法。 将光标保持在组件的 ID 上甚至不会标记ID 的出现。 相反,它标记了 MXML 中实际id词的出现。 极其缓慢。 我正在认真评估迁移到 IntelliJ IDEA 12,尤其是在阅读了许多有经验的 Flex 开发人员对其赞不绝口并推荐它之后。 我尝试过这个。 我花了一些时间来了解 IDE 的新术语(通过本文档和 JetBrains 非常有帮助的支持人员使之变得容易)。 我能够使用 Adob​​e Flex 4.6 SDK 在 IDEA 中设置我的(大型)项目并使其编译正常。 但是我注意到我的 AS 文件中突出显示了许多“错误”,它们实际上都是误报。 ActionScript 编辑器似乎无法识别 MXML 中定义的对象。 显然,这是 IDEA 中的一个已知错误(在此处跟踪)。 而且这个bug已经存在2年多了! 引用 JetBrains 支持人员的话: 我必须承认,突出显示不包含类,而是作为<fx:Script source="some_file.as"/>包含在mxml的 ActionScript 文件可能是 IntelliJ IDEA
  • 如何在React Native中正确对齐文本输入?(How to align text input correctly in react native?)
    问题 文本输入居中对齐,如何解决此文本输入问题,使其从左上角获取输入 这是我的CSS输入文字 /* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */ input: { flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150 } 回答1 我遇到了同样的问题,但是以上说明并没有解决它。 有一个仅用于android的样式属性textAlignVertical可以解决多行输入中的此问题。 即textAlignVertical: 'top' 回答2 TextInput具有默认的填充,请通过设置覆盖它: paddingTop: 0, paddingBottom: 0 Github问题 回答3 我发现在Android中,TextInput样式textAlignVertical: 'top'有效的解决方案。
  • 反应只接受数字字符的本机TextInput(React Native TextInput that only accepts numeric characters)
    问题 我需要有一个仅允许输入数字字符(0-9)的React Native TextInput组件。 我可以将keyboardType设置为numeric ,除了句点(。)之外,几乎可以输入我的信息。 但这并不能阻止将非数字字符粘贴到该字段中。 到目前为止,我想出的是使用OnChangeText事件来查看输入的文本。 我从文本中删除了所有非数字字符。 然后将文本放在状态字段中。 然后通过其Value属性更新TextInput 。 下面的代码段。 <TextInput style={styles.textInput} keyboardType = 'numeric' onChangeText = {(text)=> this.onChanged(text)} value = {this.state.myNumber} /> onTextChanged(text) { // code to remove non-numeric characters from text this.setState({myNumber: text}) } 这似乎可行,但似乎很容易破解。 还有另一种方法吗? 回答1 在专门开发此类组件(或TextInput上的属性)之前,这是正确的方法。 Web的输入元素具有“数字”类型,但这是基于Web的,react-native不使用Web视图。
  • 如何从iOS应用程序上的自定义键盘检索击键?(How do I retrieve keystrokes from a custom keyboard on an iOS app?)
    问题 我需要为iPhone应用程序构建自定义键盘。 以前有关该主题的问题和答案都集中在自定义键盘的视觉元素上,但是我试图了解如何从此键盘中检索击键。 Apple提供了inputView机制,该机制使将自定义键盘与UITextField或UITextView关联起来变得容易,但是它们不提供将生成的击键发送回关联对象的功能。 基于这些对象的典型委派,我们期望使用三种功能:一种是普通字符,一种是用于退格,另一种是用于输入。 然而,似乎没有人明确定义这些功能或如何使用它们。 如何为我的iOS应用构建自定义键盘并从中检索键击? 回答1 Greg的方法应该可以工作,但是我有一种方法不需要将键盘告知文本字段或文本视图。 实际上,您可以创建一个键盘实例,并将其分配给多个文本字段和/或文本视图。 键盘处理知道哪个是第一响应者。 这是我的方法。 我不会显示任何用于创建键盘布局的代码。 那是容易的部分。 此代码显示了所有管道。 编辑:已更新为正确处理UITextFieldDelegate textField:shouldChangeCharactersInRange:replacementString:和UITextViewDelegate textView:shouldChangeTextInRange:replacementText: 头文件: @interface SomeKeyboard
  • React-Native如何在TextInput上向上移动屏幕(React-native how to move screen up on textinput)
    问题 我有一个使用react-native创建的登录屏幕。 用户输入textInput时如何上移屏幕? 我是否监听onFocus()事件并使用CSS样式更改视图的样式? 回答1 在2017年(RN 0.43)中有一个特殊的组件:KeyboardAvoidingView 回答2 您可以使用ScrollView来控制屏幕的上下移动。 只要用户没有将任何TextInput放在TextInput ,就可以禁用滚动。 聚焦时,只需使用“内容偏移”道具上移滚动视图即可。 <TextInput onFocus={this.textInputFocused.bind(this)} /> textInputFocused() { //do your stuff here. scroll screen up } 希望能帮助到你! 回答3 Night Fury的答案是相当不错的,尽管不会为ScrollView的contentOffset大惊小怪,但我会使用ScrollResponder : render() { return ( <ScrollView ref="myScrollView"> <TextInput ref="myInput" onFocus={this._scrollToInput.bind(this)} /> </ScrollView> ); } _scrollToInput {
  • How to call one of multiple functions - JavaScript?
    I have three functions: Change Email Change password Change otherData And One Button to call them , when the user changes his data without change Email Or Password I don't wont to call other function Change Email or Change Password just call the function Change other data, and when changing his email with other data like username, location I just want to call Change Email, change other data Function NOT Change Password So how to handle this, and how to get a current password and save them in my state cuz when I wrote the wrong password, change Other Data function execute? I'm using Firebase as
  • nil object in iOS8 delegate methods - custom keyboards
    I'm building a custom keyboard and I'm implementing the following delegate methods in my InputViewController. But I always get _textInput = nil_ - (void)textWillChange:(id<UITextInput>)textInput - (void)textDidChange:(id<UITextInput>)textInput - (void) selectionWillChange:(id<UITextInput>)textInput - (void) selectionDidChange:(id<UITextInput>)textInput Does anybody know how to fix it? Is it nil for a reason? Do I need to implement something by myself?
  • 将键盘隐藏在react-native中(Hide keyboard in react-native)
    问题 如果我点击一个文本输入,我希望能够点击其他地方以便再次关闭键盘(虽然不是回车键)。 在我阅读的所有教程和博客文章中,我都没有找到与此有关的丝毫信息。 在Simulator中使用本机0.4.2时,此基本示例仍不适用于我。 还无法在我的iPhone上尝试。 <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onEndEditing={this.clearFocus} /> </View> 回答1 如果您具有keyboardType='numeric' ,则键盘无法关闭的问题会变得更加严重,因为无法消除它。 用ScrollView替换View不是正确的解决方案
  • How to autofocus next TextInput on react-native
    I'm trying to create a passcode protected screen. The screen will uses 4 numeric input as the passcode. The way I'm doing this is create a TextInput Component and call it 4 times in my main screen. The problem I'm having is the TextInputs will not focus on the next one as I type the value of the previous TextInput. I'm using refs for all PasscodeTextInput component (I've been informed that it is a legacy method but I do not know any other way, alas). Tried this method(without creating my own component), no luck too. METHOD index.ios.js import React, { Component } from 'react'; import {
  • 电话号码格式ios(Phone number format ios)
    问题 在我的应用程序中,我将电话号码作为用户的输入。 数字应采用美国格式。 我想动态显示为(555)-888-888。 例如,当用户到达4位数字时开始输入数字时,它会显示类似于(555)-4的数字,依此类推。 我尝试了replaceString方法,但发现它无法正常工作。 回答1 查看libPhoneNumber-iOS库的NBAsYouTypeFormatter类。 使用给定的美国地区代码创建NSAsYouTypeFormatter新实例: NBAsYouTypeFormatter *asYouTypeFormatter = [[NBAsYouTypeFormatter alloc] initWithRegionCode:REGION_CODE_STRING]; 然后,每次用户更改您拨打的电话号码: - (NSString*)inputDigit:(NSString*)nextChar; 或者 - (NSString*)removeLastDigit; 这两个方法返回的NSString是您动态格式化的电话号码。 回答2 我将从头开始解释。 因此,新用户可以从头开始。 从此处下载libPhoneNumber-iOS库。 在该链接页面的底部,您将找到需要添加到项目中的文件。 现在,请按照以下步骤实施。 (1)在需要格式化文本字段的视图控制器中导入文件。 #import
  • React Native how to pass this.setState change to parent
    I am new to React Native I am making a sample app where the user can login and register for a new account. I have two React classes, One is the main class index.ios.js and another class called register.js. In the index class I am saying if the variable register is true render the register screen. In the class register.js I am trying to set the variable register to false using this.setState({register:false}) but it is not causing the re render of the parent (index.ios.js). Is the a super(state) method or something similar that I am missing ? I believe the parent state is not getting the values
  • Setting a border for react native TextInput
    Using React native 0.26, My component is something like this const Search = () => { return ( <View style={styles.backgroundImage}> <TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/> </View> ) } And my styles : const styles = StyleSheet.create({ backgroundImage: { flex : 1, flexDirection: "column", justifyContent: 'center', alignItems: 'center' }, textInput: { justifyContent: "center", alignItems: "stretch", borderRightWidth: 30, borderLeftWidth: 30, height: 50, borderColor: "#FFFFFF", } }) The problems that I am facing are The
  • ReactNative TextInput placeholderTextColor doesn't seem to be working
    It seems like such a simple thing, I don't see how I'm not getting this right, but placeholderTextColor on a ReactNative TextInput isn't doing anything for me. http://facebook.github.io/react-native/docs/textinput.html#placeholdertextcolor <TextInput style={styles.input} placeholder="Foobar" placeholderTextColor="#FFFFFF"/> does nothing....
  • 反应原生获取TextInput值(react native get TextInput value)
    问题 我陷入了一个非常简单的问题。 我有带有用户名,密码和按钮的登录表单。 在我的按钮处理程序中,我尝试获取textinput值。 但是总是得到不确定的值。 我想念什么吗? render() { <ExScreen headerColor={this.state.headerColor} scrollEnabled={this.state.enableScroll} style={styles.container} > <View > <View > <View style={[styles.inputContainer]} > <TextInput ref= "username" onChangeText={(text) => this.setState({text})} value={this.state.username} /> </View> <Button style={{color: 'white', marginTop: 30, borderWidth: 1, borderColor: 'white', marginLeft: 20*vw, marginRight: 20*vw, height: 40, padding: 10}} onPress={this._handlePress.bind(this)}> Sign In </Button> ...
  • TextInput Typed Text not appearing on android
    I'm new to react-native and am trying to make an app for both android and iOS at the same time. Currently, I have a login screen set up, but both the typed text and placeholder text used within textInput is not showing in the app for android (works fine for iPhone). Here is the code snippet and style sheet: 'use strict'; import React, { Component } from 'react' var Dimensions = require('Dimensions'); var windowSize = Dimensions.get('window'); import { AppRegistry, StyleSheet, View, Text, TextInput, Image } from 'react-native'; class LoginPage extends Component { constructor() { super() this
  • How would I grow <TextInput> height upon text wrapping?
    I'm trying to create a <TextInput> that can grow in height when the text wraps to the next line, similar to how Slack's message input grows with the text up to a point. I have the multiline prop set, so it is wrapping but the docs don't seem to mention any event regarding wrapping, and the only thing I can think of is a really hacky strategy to character count to figure out when to increase height of the input. How would I accomplish this? https://facebook.github.io/react-native/docs/textinput.html
  • Keyboard aware scroll view Android issue
    I've created a react native project using Expo XDE (xde-2.19.3) with a few TextInputs on the screen. Im using KeyboardAwareScrollView to scroll the inputs from under the keyboard into view and works fine on iOS but does not work on Android. Hope that makes sense. Looked at the KeyboardAwareScrollView docs and saw that I need to configure AndroidManifest.xml but it seems that Expo has already sorted this out: https://github.com/expo/expo/blob/master/template-files/android/AndroidManifest.xml However I'm still not able to get this working on Android... What could I be missing? render() { return
  • React Native app with same code but different result for vertical margins in iOS and Android
    I tested a simple render() on android (Galaxy S7) and iOS (iPhone S8+), and I get results that I don't understand. The S7's height in dp's (Density-independent Pixels) is 640, while the iPhone 8 Plus height is 736 dp's, so I expected the distance between 'email' and 'password' to be somewhat smaller on the iPhone 8+, but not that tiny... The 2nd issue is negative margins, that seem to behave differently on the two platforms. Is that what one should expect? (And, yes, I know that I can set different margins on the two platforms, but I want to understand why the results are so different from my
  • How to make a dynamic frequency histogram from user input
    Object fileButton = null; if("Analyze Text File".equals(command)) { JFileChooser filechooser; JFileChooser chooser = new JFileChooser(); int returnVal = filechooser.showOpenDialog(getParent()); if (returnVal == JFileChooser.APPROVE_OPTION) { File file = filechooser.getSelectedFile(); String Stext = (String) readFileAsString(file); //String text = textInput.getText(); Map<Integer, Integer> counts = getCounts(text); int width = counts.size() * BAR_WIDTH; int max = maxCount(counts); int height = max * INCREMENT + 100; int horizon = height - 25; HistogramPanel panel = new HistogramPanel(width
  • making a multiline, expanding TextInput with React-Native
    I'm working on a react-native app and need a TextInput that has similar functionality to the textview in the "messages" app on iOS—it should start out as one line and then gracefully expand to more lines until some limit (like 5 lines of text) and then start scrolling along to latest line as needed. Took a look at the SlackTextViewController but a) seems like it has a lot of stuff that I don't want and b) I'd like to try to keep as much code in React (and out of objective-C/swift) as possible. Edit: Just want to emphasize that I would prefer REACT (JAVASCRIPT) code, as stated above, rather