CSS冲突导致左导航条异常,并且输入框无法获得焦点,反而被左导航条获取了求解

Posted 2023-05-04

左导航条CSS代码:.left width:200px;float:left; padding:0px 10px; background:url(../images/left_bg.gif) repeat-x;
.left .box width:191px; margin:auto;
.left .box .top_title height:39px; background:url(../images/list_title.gif) no-repeat; padding:25px 0px 0px 28px
.left .box .top_title li color:#999;
.left .box .l_list background:url(../images/list_body.gif) repeat-y;
.left .box .l_list span display:block; padding-left:20px;
.left .box .l_list li font-size:14px; height:36px;line-height:20px; margin:0px 15px; padding-left:15px;
.left .box .l_list li awidth:120px; line-height:36px;padding-left:0px;
.left .box .l_list li a:hover text-decoration: none;background:url(../images/nav_bg_hover.jpg) no-repeat 0px 0px;
.left .box .l_bottom height:31px; background:url(../images/list_bottom.gif) no-repeat;
导航条代码:
<div class="left" style="height:600px;">

<div class="box">
<div class="top_title">
<ul>
<h3>菜单管理</h3>

</ul>
</div>
<div class="l_list">
<ul>
<li><a href="order.asp">快速下单</a></li>
<li><a href="product.asp">商品目录</a></li>
<li><a href="myfavorite.asp">已收藏商品</a></li>
<li><a href="cart.asp">购物车</a></li>
<li><a href="order_list.asp">订单状态</a></li>
<li><a href="info.asp">修改公司资料</a></li>
<li><a href="address.asp">编辑送货地址</a></li>
<li><a href="advice.asp">投诉建议</a></li>
<li><a href="logout.asp">安全退出</a></li>
</ul>
</div>
<div class="l_bottom"></div>
</div>

</div>
输入框代CSS代码: ul
position:absolute;
margin-left:0px;
margin-top:0px;
border:1px solid #000;
list-style:none;
width:232px;
padding:0px;
background-color: #FFFFFF;

.select
background:#36C;
color:#FFF;

.select span
color:#FFF;

li
line-height:16px;
font-size:12px;
padding:2px;
cursor: default;

span
float:right;
font-size:12px;
color:#008000;
margin-top:-18px;

参考技术A 最好有贴图，

还有你写css的时候注意不要让内容溢出，就是容器（div）里面的内容给固定好，不要溢出这个容器（div），希望你能按照这个规范调试好你的代码 参考技术B CSS不会有冲突一般， 你的样式写的不对把 参考技术C 不好意思，问一下，输入框在哪里？ 参考技术D 你这是写的什么？里面没有输入框啊！

react-native中textInput在androidTV上的焦点处理（坑篇）

react-native中，开发androidTV输入框的焦点处理。

复述流程： 安卓TV上，无法通过上下左右键，以及遥控器的上下左右来获取输入框焦点。

 

原因: 脸书的锅，但没修，这里官方的说法，TextInput在Android TV设备上不起作用。本机ReactEditText实现存在一个问题，使它无法获得关注。这样就无法导航到TextInput。

 

解决方法：使用touchable来转发焦点。

如：

 1 import { TextInput, TouchableHighlight } from ‘react-native‘
 2 
 3 
 4 // render函数中
 5 // JSX语法
 6 render() {
 7   return (
 8         <TouchableHighlight
 9             onFocus={() => {
10                 this.textInputRef.focus();
11               }}>
12             <TextInput
13               ref={(ref) => {
14                  this.textInputRef = ref;
15               }}/>
16         </TouchableHighlight>
17     )  
18 }                

为什么要这样做?

使用react-native开发安卓手机的人可能没有注意过这个点，毕竟可以使用点击来获取焦点，但是在一些机器上，比如键盘机，以及TV这种情况下，是无法根据点击来获取焦点的。

 

这个问题起源于我在github上的一个提问。主要发现很少人提及这个问题，以及搜索没这方面的说明, 也就写这个问题。

issue地址：https://github.com/reactnativecn/react-native-website/issues/225