Question

在现场电子邮件中：

<TKEntityProperty v-tkDataFormProperty name="email" displayName imageResource="res://user" hintText="Email" index="0">
  <TKPropertyEditor v-tkEntityPropertyEditor type="Email">
    <TKPropertyEditorStyle v-tkPropertyEditorStyle labelWidth="4" />
  </TKPropertyEditor>
  <TKEmailValidator v-tkEntityPropertyValidators errorMessage="Invalid email"></TKEmailValidator>
</TKEntityProperty>

可以在Nativescript的RadDataForm中设置autocapitalizationType =“ none”吗？

Answer 1

截止到今天，它是open feature request，您可能需要对此问题进行投票并在此进行跟进。

仍然可以访问本机编辑器对象并关闭自动大写。

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <RadDataForm :source="person" @editorUpdate="onEditorUpdate">
            <TKEntityProperty v-tkDataFormProperty name="email">
                <TKPropertyEditor v-tkEntityPropertyEditor type="Email">
                    <TKPropertyEditorStyle v-tkPropertyEditorStyle />
                </TKPropertyEditor>
            </TKEntityProperty>
        </RadDataForm>
    </Page>
</template>

<script>
    import Vue from "nativescript-vue";
    import RadDataForm from "nativescript-ui-dataform/vue";
    Vue.use(RadDataForm);

    import * as application from "tns-core-modules/application";

    export default {
        data() {
            return {
                person: {
                    email: ""
                }
            };
        },
        methods: {
            onEditorUpdate: function(args) {
                if (args.propertyName === "email") {
                    if (application.ios) {
                        args.editor.editor.autocapitalizationType =
                            UITextAutocapitalizationType.None;
                    }
                }
            }
        }
    };
</script>

Playground Sample

我相信您的问题应该只在iOS上出现，默认情况下在Android上是小写。

Answer 2

我只是想发布一个答案，该答案还显示了如何为Android和iOS更改键盘，以防对任何人有帮助。我正在将NativeScript 7与Angular和TypeScript一起使用（但您也可以只使用常规JavaScript），并且可以通过访问RadDataForm下使用的iOS和Android的本机元素来使其工作。我还能够弄清楚TypeScript的类型，很高兴看到所有InputType都可用*：

<RadDataForm [source]="item" (editorUpdate)="onEditorUpdate($event)">
    <TKEntityProperty tkDataFormProperty name="description"></TKEntityProperty>
</RadDataForm>

import { DataFormEventData } from 'nativescript-ui-dataform';
import { ios } from '@nativescript/core/application';

// ... inside an Angular component
  public onEditorUpdate(dataFormEvent: DataFormEventData): void {
    if (dataFormEvent.propertyName === 'descriptionProperty') {
      if (ios) {
        const iosTextField = dataFormEvent.editor as UITextField;
        iosTextField.autocapitalizationType = UITextAutocapitalizationType.None;  // "Sentences", "Words", "AllCharacters", or "None"
        iosTextField.autocorrectionType = UITextAutocorrectionType.Yes;  // "Yes", "No", or "Default"
      } else {
        const textEditor = dataFormEvent.editor as com.telerik.widget.dataform.visualization.editors.DataFormTextEditor;
        const androidEditText = textEditor.getEditorView() as android.widget.EditText;
        androidEditText.setInputType(android.text.InputType.TYPE_TEXT_VARIATION_NORMAL);  // Many difference choices see Android docs: https://developer.android.com/reference/android/text/InputType
      }
    }
  }

* Android InputType的选择，请参阅Android文档：https://developer.android.com/reference/android/text/InputType

电子邮件中的RadDataForm小写

2 个答案: