标签: textinput

我正在尝试创建一个表单，其中写入“其他”选项作为最后一个单选按钮。我尝试过以下变体但没有成功：

<label><input type="radio" name="candidate" value="option1">First Option</label>
<label><input type="radio" name="candidate" value="option2">Second Option</label>
<label><input type="radio" name="candidate" value="other">OTHER</label><input type="text" name="other" value="Write In" />

是否可以有一个带有文本输入的单选按钮，在提交时将其值传递给该单选按钮而不使用 javascript？

好的，我一直在研究 SDL 中的文本输入（如何将击键数据转换为字母并将它们附加到名为 Text 的 std::string 中），并且大多数教程都以这种方式进行了介绍：

//If a key was pressed
if(event->type == SDL_KEYDOWN )
{
        //If the key is a lowercase letter
        else if( (event->key.keysym.unicode >= (Uint16)'a' ) && (event->key.keysym.unicode <= (Uint16)'z' ) )
        {
            //Append the character
            Text += (char)event->key.keysym.unicode;
        }
}

然而，经过一番搜索后，我在 SDL 标头中发现了一条注释，指出 .unicode 已弃用并使用SDL_TextInputEvent/SDL_TextEditingEvent。SDL 文档 wiki 中有一些关于它的参考，但是我找不到任何有关如何使用它的示例。例如，我将如何使用新结构编写上面的代码片段？

我是 React Native 的新手，我一直在研究一个搜索栏，它可以在用户输入字段时过滤列表。这是它的样子......

<TextInput style={{width: '100%', textAlign: 'center'}}
  ref={(ref) => this.searchInput = ref}
  placeholder="Search"
  onChangeText={ (text) => this.onChangeText(text)}
  value={this.state.search} />

这是我用于此行为的 onChangeText 方法

onChangeText(text) {
    var filtered;

    this.setState({search: text});
    filtered = this.props.data.filter((item) => {
        if(item.section) {
          return true;
        }
        return (item.label.toLowerCase().includes(text.toLowerCase()));
    });

    this.setState({filteredList: filtered});
}

我已将状态设置为保留用户在搜索栏中输入的任何内容，因为它会在渲染时清除。这工作正常，除了每次组件重新渲染时键盘一直关闭（在用户输入/删除的每个字符上）。

为了解决这个问题，我尝试使用像这样的 refs 专注于输入

componentDidUpdate() {
    if(this.searchInput) {
        this.searchInput.focus();
    }
}

但即便如此，键盘还是会时不时地播放打开/关闭动画，并且无法顺利处理输入/删除操作。

这是问题的 gif。

为了解决这个问题，我想将 TextInput 移动到一个单独的组件中（只有那个输入字段），然后将该组件添加到我的列表中。但是，我必须不断地将文本数据传回以过滤我的列表，从而增加了更多的复杂性。可能有更简单的解决方案吗？

我正在使用 python kivy 框架来开发一个 GUI，然后它很可能会在带有（硬件）鼠标和键盘的台式机上使用。我现在的问题是，当使用 Text Input 类时，如果 Text Input 字段获得焦点，它会自动创建一个虚拟键盘。除其他外，我尝试设置选项

keyboard_mode = 'managed'

在我的主要实现方式如下：

textinputfield = TextInput(text="some initial text here", text_size=self.size, keyboard_mode='managed')

它实际上隐藏了键盘，但不幸的是也阻止了用户将任何数据输入到该字段中......我在谷歌上找不到任何解决方案。你有什么想法？

我正在使用 React Native 的 TextInput。我想根据要求禁用返回键。有没有办法通过自定义代码禁用/启用返回键？我尝试使用 enableReturnKeyAutomatically 但它不起作用。

我尝试在输入文本中获取值，并使用 react-bootstrap 将其添加到文本区域。

我知道我必须使用 ReactDOM.findDOMNode 来获取 ref 的值。我不明白出了什么问题。

这是我的代码：

import React from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import { InputGroup, FormGroup, FormControl, Button} from 'react-bootstrap';
import './App.css';
class InputMessages extends React.Component {
constructor(props) { 
super(props);
this.handleChange =      this.handleChange.bind(this); 
    this.GetMessage= this.GetMessage.bind(this); 
this.state = {message: ''};
}   
handleChange(event)
{    
this.setState({message: this.GetMessage.value});
}
GetMessage()
{   
return ReactDOM.findDOMNode(this.refs.message     );
 }
 render() {
    var message = this.state.message;
    return(
 <FormGroup > 
 <FormControl
 componentClass="textarea" value={message} />
 <InputGroup> 
 <FormControl type="text" ref='message' /> 
    <InputGroup.Button>
    <Button …

我有一段代码。(1) TextInput 的值应该是显示出来的，但首先它应该是不可编辑的，点击对应的CheckBox后，TextInput是可编辑的。
(2) 使用迭代，Label 和TextInput 应该得到值。Label 和 TextInput 的值不应该被硬编码（尽管它在我的代码中，@FJSevilla 帮助我完成了这个）。
(3) 但是Label和TextInput的值是以json格式存储在一个变量中的。像这样（你可以考虑像映射中的键，值对）[变量 = '{"a" : " Goc" , "b" : "Coc", "c" : "Dow" } ']（你可以看到示意图以获取更多间隙）。我很感激你的帮助。

from kivy.app import App
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.lang import Builder

Builder.load_string("""

<Test>:
    do_default_tab: False

    TabbedPanelItem:
        text: 'page1'

        BoxLayout:
            padding: 50, 50, 50, 50
            orientation: 'horizontal'

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                size_hint_x: 1
                Label:
                    text: 'a'
                Label:
                    text: 'b'
                Label:
                    text: 'c'

            BoxLayout:
                spacing: 50
                orientation: 'vertical'
                TextInput:
                    text: 'Goc'
                TextInput:
                    text: …

我有一个在 React Native 中使用文本输入的搜索功能，但是搜索需要调用一个 API，所以我想onChangeText在用户完成输入 2 秒后保持运行，

我试过使用setInterval，setTimeout但这些都不起作用，

这是我试过的代码：

<TextInput
  placeholder="search"
  onChangeText={(text) => {
    setTimeout(() => {
      console.log(text)
      console.log("Kepanggil TimeOUTNYAA")
      params.onSearchText(text)
    }, 2000);
  }
}

//function onSearchText

onSearchText(searchText){
  this.setState({text:searchText},()=>{
    this._loadMore() // here's a function to call the API
  })
}

实际行为：

当我键入am在TextInput日志显示我：

预期行为：

我希望日志只 显示我am 不 a和am

有可能做到吗？

我正在尝试使用 react native 元素和 react native 实现多行扩展文本输入，但我似乎无法让它正常运行。该行为显示在以下屏幕截图中：

正如你在这里看到的，文本有明显不止一行，但文本输入并没有展开。

每当我输入更多字符时，它都会扩展一点，但会向下扩展到键盘中。

添加另一行不会扩展键盘：

直到我添加更多字符，直到最新行是文本输入宽度的一半，输入才会展开

这是我用于文本输入的代码：

<View style={{flexDirection:'row', backgroundColor: 'transparent', height: Math.max(45, this.state.viewHeight)}}>
<Input
          containerStyle={{marginVertical: 0, width:300, marginLeft: 10}}
          inputStyle={[styles.textInput, {height: Math.max(35, this.state.height)}]}
          multiline
          enablesReturnKeyAutomatically={true}
          keyboardAppearance="dark"
          placeholder=""          
          onContentSizeChange={(event) => {
            if (this.state.height <= (35*6)){
            this.setState({
               height: event.nativeEvent.contentSize.height,
              viewHeight: event.nativeEvent.contentSize.height })
            }
          }}
          onChangeText={(message) => { this.setState({message})
        }}

这是我的文本输入样式的代码：

textInput: {
      paddingHorizontal: 12,
      width: 100,
      backgroundColor: '#F0F0F0',
      borderStyle: 'solid',
      marginLeft: -4,
      overflow: 'hidden',
      marginTop: 5,
      borderWidth: 1,
      borderColor: 'lightgrey',
      borderRadius: 25,
    },

似乎内容大小更改事件在错误的时间触发，有什么方法可以将其设置为仅在新行具有特定长度并向上扩展而不是向下扩展到键盘时触发？

我正在尝试使用半透明文本输入在本机反应中制作登录屏幕。但是，当我在输入中键入文本时，会出现一种奇怪的行为：键入的文本看起来像是突出显示的（但事实并非如此）。正如您在此屏幕截图中看到的：

（似乎无法上传到imgur，所以：https ://image.ibb.co/hvBDQe/Image_1.jpg ）

这是我的代码：

class LoginForm extends Component {

    //#region Constructeurs   
    constructor(props) {
        // Appel du constructeur de Component
        super(props);
        // Initialise les propriétés du composant
        this.state = {
            isLoading: false,
            usernameInput: "",
            passwordInput: "",
            urlInput: "",
            portInput: "443"
        };
    }
    //#endregion

    //#region Cycle de vie du Component
    componentDidMount() {
        
    }

    render() {

        return (
            <View style={styles.mainContainer} pointerEvents={this.state.isLoading ? 'none' : 'auto'}>
                <TextInput style = {styles.input} 
                            autoCapitalize="none" 
                            onSubmitEditing={() => this.passwordInput.focus()} 
                            autoCorrect={false} 
                            keyboardType='email-address' 
                            returnKeyType="next" 
                            placeholder='*Email*' 
                            placeholderTextColor={COLOR_GREY_300}
                            value={this.state.usernameInput}
                            onChangeText={text => …