Form（文本域）

填写类表单-文本域。Form UI 提供与WeLink规范一致的表单视图。

效果示例

    <div class="page" style="background: #eee;">
        <div class="page__hd">
            <h1 class="page__title">Form</h1>
            <p class="page__desc">表单（填写）
        </div>
        <div class="page__bd">
            <div class="weui-form_view">
                <div class="weui-form_view-cell__access_view">              
                    <div class="weui-form_view-cell__access_container">         
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="inputtext" type="text" placeholder="请输入文本" value="这是初始化文本内容"/>
                            </div>
                            <div class="weui-cell__ft" id="inputclear" style="display:block;">
                                <i class="weui-icon-clear"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell__access_view">
                    <div class="weui-form_view-cell__access_view-item">
                        <div class="weui-form_view-cell__access_label">标题</div>
                        <div class="weui-form_view-cell__access_container">                        
                            <div class="weui-cell">                   
                                <div class="weui-cell__bd">
                                    <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
                                    <div class="weui-textarea-counter"><span>0</span>/200</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>            
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell__access_view">            
                    <div class="weui-form_view-cell__access_container">
                        <div class="weui-cell">                     
                            <div class="weui-cell__bd">
                                <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
                                <div class="weui-textarea-counter"><span>0</span>/200</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell__access_view">            
                    <div class="weui-form_view-cell__access_label">标题</div>
                    <div class="weui-form_view-cell__access_tags">
                        <span>常用</span>
                        <span>常用</span>
                        <span>常用三</span>
                        <span>常用四字</span>
                    </div>
                    <div class="weui-form_view-cell__access_container">
                        <div class="weui-cell">                 
                            <div class="weui-cell__bd">
                                <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
                                <div class="weui-textarea-counter"><span>0</span>/200</div>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>            
            <div class="weui-form_view" style="margin-top: 30px;">
                <div class="weui-form_view-cell__access_view">
                    <div class="weui-form_view-cell__access_tags weui-form_view-cell__access_tags_nolabel">
                        <span>常用</span>
                        <span>常用</span>
                        <span>常用三</span>
                        <span>常用四字</span>
                    </div>
                    <div class="weui-form_view-cell__access_container">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
                                <div class="weui-textarea-counter"><span>0</span>/200</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            function changeValue() {
                if($('#inputtext').val()) {
                    $('#inputclear').show();
                } else {
                    $('#inputclear').hide();
                }
            }
            $('#inputclear').click(function(){
                $('#inputtext').val('');
                $(this).hide();
            });            
            $('#inputtext').on('input', function() {
                changeValue();
            });
            $('.weui-textarea').on('input', function(){
                const value = $(this).val();
                if(value.length > 200) {
                    $(this).val(value.substr(0, 200));
                }
                const $count = $(this).parent().find('.weui-textarea-counter span');
                $count.html($(this).val().length);
            });
            $('.weui-form_view-cell__access_tags span').click(function(){
                const $parent = $(this).parent().parent();
                const $textArea = $parent.find('.weui-textarea');
                const value = $textArea.val() + $(this).html();
                $textArea.val(value.replace(' ', ''));
                if(value.length > 200){
                    $textArea.val(value.substr(0, 200));
                }
                const $count = $parent.find('.weui-textarea-counter span');
                $count.html($textArea.val().length);
            });
        });
    </script>