Flex---TextInput keyDown事件应用

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
 
 <fx:Script>
  <![CDATA[
   
   import mx.controls.Alert;
   
   protected function t1_keyDownHandler(event:KeyboardEvent):void
   {
    if(event.keyCode == 13)
    {
     t2.setFocus();
    }
    
   }
   
   protected function t2_keyDownHandler(event:KeyboardEvent):void
   {
    if(event.keyCode == 13)
    {
     btn_clickHandler(null);
    }
   }
   
   protected function btn_clickHandler(event:MouseEvent):void
   {
    // TODO Auto-generated method stub
    Alert.show("以点击按钮");
   }
   
  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- 将非可视元素(例如服务、值对象)放在此处 -->
 </fx:Declarations>
 <s:Button id="btn" x="147" y="212" label="按钮" click="btn_clickHandler(event)"/>
 <s:TextInput id="t1" x="115" y="107" keyDown="t1_keyDownHandler(event)"/>
 <s:TextInput id="t2" x="115" y="154" keyDown="t2_keyDownHandler(event)"/>


</s:Application>

下面是一个简单的 Vue 组件,可以模拟微信聊天界面和机器人左右两侧对话: ```vue <template> <div class="chat-container"> <div v-for="(message, index) in messages" :key="index" :class="['chat-message', message.isRobot ? 'robot' : 'user']"> <div class="message-content">{{ message.content }}</div> </div> <div class="chat-input"> <input type="text" v-model="inputText" @keydown.enter="sendMessage" placeholder="请输入消息" /> <button @click="sendMessage">发送</button> </div> </div> </template> <script> export default { data() { return { messages: [ { content: '你好,我是机器人', isRobot: true }, ], inputText: '', } }, methods: { sendMessage() { const content = this.inputText.trim() if (content) { this.messages.push({ content, isRobot: false }) this.inputText = '' setTimeout(() => { this.messages.push({ content: '对不起,我不知道怎么回答', isRobot: true }) }, 1000) } } } } </script> <style> .chat-container { display: flex; flex-direction: column; height: 100%; padding: 10px; } .chat-message { display: flex; margin-bottom: 10px; align-items: flex-end; } .chat-message.robot { justify-content: flex-start; } .chat-message.user { justify-content: flex-end; } .message-content { max-width: 80%; padding: 10px; background-color: #eee; border-radius: 10px; word-wrap: break-word; } .chat-input { display: flex; margin-top: auto; } .chat-input input { flex: 1; padding: 10px; border-radius: 10px; border: none; margin-right: 10px; } .chat-input button { padding: 10px; border-radius: 10px; background-color: #007aff; color: #fff; border: none; cursor: pointer; } </style> ``` 这段代码实现了一个简单的聊天界面,用户可以在输入框中输入消息,机器人则会随机回复一条消息。`messages` 数组存储了所有的消息记录,`inputText` 存储了当前输入框中的文本。`sendMessage` 方法用于发送消息,它会将用户输入的消息添加到 `messages` 数组中,并且模拟机器人回复一条消息。界面中的样式使用了简单的 CSS 样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值