如何在控件sapui5中添加CSS样式？（组合框，TextArea）

如何在控件sapui5中添加CSS样式？（组合框，TextArea）

2020-09-24 11:18发布

站内问答 / UI5

1075 3

点击此处---> 群内免费提供SAP练习系统（在群公告中）

加入QQ群：457200227（SAP S4 HANA技术交流）群内免费提供SAP练习系统（在群公告中）

大家好，

我正在尝试添加CSS样式进行控制。只要选择组合框内的值，该值就会提交到文本区域。

我想将选定值的CSS样式添加到textarea中。

有什么主意我该怎么做？

致谢

谢尔盖

XML

 
 <项目>
 
 
 
 
 
 
 
  </pre>
 <pre> JS </pre>
 <pre> onInit：function（）{


//在此示例上设置浏览的应用程序的演示模型
 var oModel = new JSONModel（jQuery.sap.getModulePath（" sap.ui.demo.mock"，"/countriesCollection.json"）））;
 oModel.setProperty（"/img/comboBoxValue"，""）;
 oModel.setProperty（"/img/comboBoxKey"，""）;
 this.getView（）。setModel（oModel）;
 }，


 fnFormatter：函数（文本，键）{
 var sText ="";
 如果（文本和键）{
 sText + ="选定的水果：" +文本；
 }


 返回sText;
 }
 </pre></p>
  </div>

  <div class="show-content hide hidequestioncontent">
<h6>         <strong><span style="font-size:24px;font-family:'Arial',sans-serif;color:#3C3C3C">点击此处--->
  </span></strong><a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0G3L9uZTbor8h6vhI8-lICNXNjgwRScW&jump_from=webapi"><img src="https://www.easysap.com/data/ueditor/php/upload/image/20220811/1660198606336474.png" alt="EasySAP.com" title="EasySAP.com"/></a><strong><span style="font-size:24px;font-family:'Arial',sans-serif;color:#3C3C3C">群内免费提供SAP练习系统（在群公告中）</span></strong></h6><p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:
0;text-indent:32px">加入QQ群：457200227（SAP S4 HANA技术交流） 群内免费提供SAP练习系统（在群公告中）</p><p style="margin-top:5px;margin-right:0;margin-bottom:5px;margin-left:
0;text-indent:32px"><br/></p><p>大家好，</p>
 <p>我正在尝试添加CSS样式进行控制。 只要选择组合框内的值，该值就会提交到文本区域。</p>
 <p>我想将选定值的CSS样式添加到textarea中。</p>
 <p>有什么主意我该怎么做？</p>
 <p>致谢</p>
 <p>谢尔盖</p>
 <pre> XML </pre>
 <pre> <ComboBox showSecondaryValues =" true" filterSecondaryValues =" true" value =" {/comboBoxValue}" selectedKey =" {/comboBoxKey}" width =" 500px">
 <项目>
 <core：Item text ="" key =""/>
 <core：Item text =" Orange" key =" Orange"/>
 <core：Item text =" Apple" key =" Apple"/>
 <core：Item text =" Apricot" key =" Apricot"/>
 <core：Item text ="香蕉" key ="香蕉"/>
 </items>
 </ComboBox>
 <TextArea id =" textarea" cols =" 60" value =" {parts：[{path：'/comboBoxValue'}，{path：'/comboBoxKey'}]，格式化程序：'.fnFormatter'}"
 width =" 100％"/>
 </pre>
 <pre> JS </pre>
 <pre> onInit：function（）{


//在此示例上设置浏览的应用程序的演示模型
 var oModel = new JSONModel（jQuery.sap.getModulePath（" sap.ui.demo.mock"，"/countriesCollection.json"）））;
 oModel.setProperty（"/img/comboBoxValue"，""）;
 oModel.setProperty（"/img/comboBoxKey"，""）;
 this.getView（）。setModel（oModel）;
 }，


 fnFormatter：函数（文本，键）{
 var sText ="";
 如果（文本和键）{
 sText + ="选定的水果：" +文本；
 }


 返回sText;
 }
 </pre>  </div></div>
<div class="details-con-other border-top">
<div class="">



<div class="three-link">
   <!-- cdn节点 问题操作按钮 -->
                        <div class="cdn_question_button"></div>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="container index" id="showanswerform">
<div class="row">
<div class="col-md-17 main " style="padding: 0px;">
<div class="note ">
<div class="post">
<div class="comment-list">
<div class="new-comment canwirteanswer"
style="margin: 0px 10px 10px 10px;">
<div style="" class="answer-txtbox bb top-answer"
id="answer-txtbox"><form class="new-comment" id="huidaform" name="answerForm"
method="post" style="margin: 10px;">
<input type="hidden" value="101170" id="ans_qid"
name="qid"> <input type="hidden" id="tokenkey" name="tokenkey"
value='' /> <input type="hidden"
value="如何在控件sapui5中添加CSS样式？  （组合框，TextArea）" id="ans_title" name="title">
<script src="https://www.easysap.com/static/js/neweditor/ueditor.config.js" type="text/javascript"></script>
<script src="https://www.easysap.com/static/js/neweditor/ueditor.all.js" type="text/javascript"></script>
<script type="text/plain" id="editor"  name="content"  style="width:100%;height:200px;"></script>                                 
<script type="text/javascript">
                                 var isueditor=1;
            var editor = UE.getEditor('editor',{
                //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
                toolbars:[['fullscreen',   'source','|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']],
            
                initialContent:'',
            
            
                //关闭字数统计
                wordCount:false,
                //关闭elementPath
                elementPathEnabled:false,
                //默认的编辑区域高度
                initialFrameHeight:250
                //更多其他参数，请参考ueditor.config.js中的配置项
                //更多其他参数，请参考ueditor.config.js中的配置项
            });

        </script><div class="write-function-block"><div class="hint">付费偷看设置</div>

<div class="emoji-modal-wrap">
<a class="emoji " data-toggle="tooltip"
data-placement="right" title=""
data-original-title="设置付费查看回答金额"> <i
class="fa fa-paypal text-red mar-ly-1"></i>
</a>
</div> <a class="btn btn-send" id="ajaxsubmitasnwer">发送</a>
</div></form></div>


</div>



<div id="comment-list" class="comment-list bb"
style="margin: 0px; margin-bottom: 20px;">

<div id="normal-comment-list" class="normal-comment-list">
<div>
<div>
<div class="top" id="comments">
<span>3条回答</span>

<div class="pull-right"></div>
</div>
</div>                                                                    
           
            <div id="comment-272830" class="comment">
            <div>
                                  <div class="author">
            <a href="https://www.easysap.com/u-144.html" target="_self" class="avatar">
            <img src="https://www.easysap.com//static/css/default/avatar.gif"  onmouseover="showInfoCard(this,'usercard',144)" onmouseout="hideInfoCard('usercard')" >
            </a>
            <div class="info">
            <a href="https://www.easysap.com/u-144.html" target="_self" class="name">
            CJones                                          </a>
            <!---->
             <div class="meta">
             <span>1楼-- · 2020-09-24 12:22</span>
             </div>
             </div>
             </div>
                          <div class="comment-wrap art-content">
             <div class="answercontent" style="max-height:10000000px">
                                                                          <p>您好<a rel="nofollow" href="https://answers.sap.com/users/283445/javacx.html"> Sergey Easen </a>，</p>
 <p>您可以使用方法addStyleClass（），并将CSS类作为参数传递给该方法，以将自定义样式设置为控件。</p>
 <p>此致</p>
 <p> Arjun Biswas </p>                                                                    <div class="appendcontent">
                                                        </div>
            </div>
       
             <div class="tool-group">
             <!-- cdn节点 回答操作 -->
<div class="cdn_question_answer272830"></div>
<script type="text/javascript">
  getquestioncaozuo(5,101170,272830);
</script>

                </div>
                </div>
                  
                </div>


<div class="comments-mod "
style="display: none; float: none; padding-top: 10px;"
id="comment_272830">
<div class="areabox clearfix">

<div class="input-group">
<input type="text" placeholder="请输入评论内容，不少于5个字"
AUTOCOMPLETE="off" class="comment-input form-control"
name="content" /> <input type='hidden' value='0'
name='replyauthor' /> <span class="input-group-btn"><input
type="button" value="评论" class="btn btn-green"
name="submit" onclick="addcomment(272830);" /> </span>
</div>

</div>
<ul class="my-comments-list nav">
<li class="loading text-left"><img
src='https://www.easysap.com/static/css/default/loading.gif'
align='absmiddle' /> 加载中...</li>
</ul>
</div>

</div>
         
            <div id="comment-272831" class="comment">
            <div>
                                  <div class="author">
            <a href="https://www.easysap.com/u-134.html" target="_self" class="avatar">
            <img src="https://www.easysap.com/data/avatar/000/00/01/small_000000134.jpg"  onmouseover="showInfoCard(this,'usercard',134)" onmouseout="hideInfoCard('usercard')" >
            </a>
            <div class="info">
            <a href="https://www.easysap.com/u-134.html" target="_self" class="name">
            空代码                                          </a>
            <!---->
             <div class="meta">
             <span>2楼-- · 2020-09-24 12:06</span>
             </div>
             </div>
             </div>
                          <div class="comment-wrap art-content">
             <div class="answercontent" style="max-height:10000000px">
                                                                          <p>嗨，谢尔盖，</p>
 <p>您需要做的就是添加</p>
 <pre> this.byId（'textarea'）。addStyleClass（text）; </pre>
 <p>添加到fnFormatter函数，然后将一些与ComboBox中的值同名的自定义CSS类添加到项目中。</p>
 <p>最好的问候</p>
 <p>年轻的猎人</p>                                                                    <div class="appendcontent">
                                                        </div>
            </div>
       
             <div class="tool-group">
             <!-- cdn节点 回答操作 -->
<div class="cdn_question_answer272831"></div>
<script type="text/javascript">
  getquestioncaozuo(5,101170,272831);
</script>

                </div>
                </div>
                  
                </div>


<div class="comments-mod "
style="display: none; float: none; padding-top: 10px;"
id="comment_272831">
<div class="areabox clearfix">

<div class="input-group">
<input type="text" placeholder="请输入评论内容，不少于5个字"
AUTOCOMPLETE="off" class="comment-input form-control"
name="content" /> <input type='hidden' value='0'
name='replyauthor' /> <span class="input-group-btn"><input
type="button" value="评论" class="btn btn-green"
name="submit" onclick="addcomment(272831);" /> </span>
</div>

</div>
<ul class="my-comments-list nav">
<li class="loading text-left"><img
src='https://www.easysap.com/static/css/default/loading.gif'
align='absmiddle' /> 加载中...</li>
</ul>
</div>

</div>
         
            <div id="comment-272832" class="comment">
            <div>
                                  <div class="author">
            <a href="https://www.easysap.com/u-163.html" target="_self" class="avatar">
            <img src="https://www.easysap.com//static/css/default/avatar.gif"  onmouseover="showInfoCard(this,'usercard',163)" onmouseout="hideInfoCard('usercard')" >
            </a>
            <div class="info">
            <a href="https://www.easysap.com/u-163.html" target="_self" class="name">
            风早神人                                          </a>
            <!---->
             <div class="meta">
             <span>3楼-- · 2020-09-24 12:12</span>
             </div>
             </div>
             </div>
                          <div class="comment-wrap art-content">
             <div class="answercontent" style="max-height:10000000px">
                                                                          <p>谢尔盖，</p>
 <p>我认为您不能在文本区域内的文本中添加CSS。 相反，您可以使用html控件，而可以在其中使用css/styles </p>
 <p> <a href="https://sapui5.hana.ondemand.com/#/entity/sap.ui.core.HTML" target="_blank"> https://sapui5.hana.ondemand.com/ #/entity/sap.ui.core.HTML </a> </p>                                                                    <div class="appendcontent">
                                                        </div>
            </div>
       
             <div class="tool-group">
             <!-- cdn节点 回答操作 -->
<div class="cdn_question_answer272832"></div>
<script type="text/javascript">
  getquestioncaozuo(5,101170,272832);
</script>

                </div>
                </div>
                  
                </div>


<div class="comments-mod "
style="display: none; float: none; padding-top: 10px;"
id="comment_272832">
<div class="areabox clearfix">

<div class="input-group">
<input type="text" placeholder="请输入评论内容，不少于5个字"
AUTOCOMPLETE="off" class="comment-input form-control"
name="content" /> <input type='hidden' value='0'
name='replyauthor' /> <span class="input-group-btn"><input
type="button" value="评论" class="btn btn-green"
name="submit" onclick="addcomment(272832);" /> </span>
</div>

</div>
<ul class="my-comments-list nav">
<li class="loading text-left"><img
src='https://www.easysap.com/static/css/default/loading.gif'
align='absmiddle' /> 加载中...</li>
</ul>
</div>

</div>
<div class="pages"></div>

</div>
</div>
<div></div>
</div>
<!-- cdn 问答邀请 -->
<div class="cdn_question_invate"></div>		
<script type="text/javascript">
getquestioncaozuo(7,101170);
</script><div class="new-answer bb">
<h3 class="title">
一周热门 <a href="https://www.easysap.com/content/solve.html" target="_blank" class="more">更多<font>>
</font></a>
</h3>
<div class="inf-list">
<ul class="clearfix">
</ul>
</div>
</div>

</div>
</div>


</div>

</div>

<div class="col-md-7  aside "><div class="ad_vip" style="margin-bottom: 10px;">
<a href="javascript:login()"><img style="width: 100%;"
src="https://www.easysap.com/static/images/ad_vip.png" /></a>
    <h6>点击此处--->
                <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=0G3L9uZTbor8h6vhI8-lICNXNjgwRScW&jump_from=webapi"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="EasySAP.com" title="EasySAP.com"></a>
                一起学习S4 HANA ...</h6>
</div><div class="standing">
<div class="positions bb" id="rankScroll">
<h3 class="title">相关问答</h3>
<ul><li class="no-video"><a
href="https://www.easysap.com/q-111093.html"
title="仅针对一种布局的样式"> 仅针对一种布局的样式 </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-111093.html" class="anum">
4 个回答</a>
</div></li> <li class="no-video"><a
href="https://www.easysap.com/q-111076.html"
title="网关属性标签"> 网关属性标签 </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-111076.html" class="anum">
1 个回答</a>
</div></li> <li class="no-video"><a
href="https://www.easysap.com/q-111058.html"
title="在SAP HANA内部部署环境中更新SAPUI5交付单元？"> 在SAP HANA内部部署环境中更新SAPUI5交付单元？ </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-111058.html" class="anum">
7 个回答</a>
</div></li> <li class="no-video"><a
href="https://www.easysap.com/q-111045.html"
title="值帮助对话框控件中的搜索帮助"> 值帮助对话框控件中的搜索帮助 </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-111045.html" class="anum">
3 个回答</a>
</div></li> <li class="no-video"><a
href="https://www.easysap.com/q-111030.html"
title="SAP UI5：-需要更改Richtext Editor默认文本"> SAP UI5：-需要更改Richtext Editor默认文本 </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-111030.html" class="anum">
1 个回答</a>
</div></li> <li class="no-video"><a
href="https://www.easysap.com/q-111024.html"
title="在调试模式下加载忙指标，但在运行时不加载"> 在调试模式下加载忙指标，但在运行时不加载 </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-111024.html" class="anum">
2 个回答</a>
</div></li> <li class="no-video"><a
href="https://www.easysap.com/q-111020.html"
title="将第三方库添加到SAP Design Studio"> 将第三方库添加到SAP Design Studio </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-111020.html" class="anum">
4 个回答</a>
</div></li> <li class="no-video"><a
href="https://www.easysap.com/q-110962.html"
title="SAP HCP for Odata中的WEB IDE问题"> SAP HCP for Odata中的WEB IDE问题 </a>
<div class="num-ask">
<a href="https://www.easysap.com/q-110962.html" class="anum">
1 个回答</a>
</div></li> </ul>
</div>
</div><!--广告位5--></div>
</div>
</div>

<div class="modal fade" id="dialogadopt">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">关闭</span>
</button>
<h4 class="modal-title">采纳回答</h4>
</div>
<div class="modal-body">

<form class="form-horizontal" name="editanswerForm" method="post">
<input type="hidden" value="101170" id="adopt_qid"
name="qid" /> <input type="hidden" id="adopt_answer" value="0"
name="aid" />
<table class="table ">
<tr valign="top">
<td>向帮助了您的网友说句感谢的话吧!</td>
</tr>
<tr>
<td>
<div class="inputbox mt15">
<textarea class="form-control" id="adopt_txtcontent"
name="content">非常感谢!

如何在控件sapui5中添加CSS样式？ （组合框，TextArea）

点击此处---> 群内免费提供SAP练习系统（在群公告中）

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

如何在控件sapui5中添加CSS样式？（组合框，TextArea）