jquery中的某些事件调用后如何自动单击我的textarea答案

【问题标题】：How to auto click my textarea after certian event call in jqueryjquery中的某些事件调用后如何自动单击我的textarea
【发布时间】：2018-10-01 06:40:15
【问题描述】：

我的项目有问题。我想在用户通过 iframe 添加 youtube 视频后自动单击我的文本区域。但不知道如何实现这一点。

这是我正在尝试的

document.getElementById('youtube_select').onclick = function () {
        var youtube = jQuery('input[name=youtube]:checked').val();
        if(youtube) {
            if(typeof(clickedElement) != "undefined"){
                clickedElement.after('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
            } else {
                jQuery('.medium-editor-element').append('<iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/' + youtube + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><p><br></p>');
            }

            jQuery("#textarea").focus();
        }
    }

这是在我的文本区域中添加的元素

<div class="col-xs-12">
    <div class="textarea-field editor">
        <div class="form-control textarea medium-editor-element" id="medium-editor-1538377761979" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="b41ef202-8466-bd3b-2659-be0c9528b8ef" data-placeholder="Type your text" style="height: 84px;" data-medium-focused="true"><p>uiiuiuiu</p><p><br></p><iframe style="width: 95%;height: 400px;" src="https://www.youtube.com/embed/EU7PRmCpx-0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe><p><br></p></div>
        <textarea class="form-control textarea medium-editor-hidden" id="textarea" onkeyup="auto_grow(this)" placeholder="Start writing" name="content" cols="50" rows="10" medium-editor-textarea-id="medium-editor-1538377761979" style="height: 0px;"></textarea>
    </div>
    <div class="toolbox active">
        <a href="#" id="quick-add"><img src="http://192.168.1.122/bemediav2/public/img/frontend/plus.png" alt=""></a>
        <div class="toolbox-option">
            <ul>
                <li><a id="quick-close" href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-close.png" alt=""></a></li>
                <li><a href="javascript:void(0)" id="uploadimage"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-img.png" alt=""></a></li>
                <li><a data-toggle="modal" data-target="#upload_Media" href="javascript:void(0)"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-video.png" alt=""></a></li>
                <li><a href="javascript:void(0)" data-toggle="modal" data-target="#uploadlink"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-link.png" alt=""></a></li>
                <li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-audio.png" alt=""></a></li>
                <li><a href="#"><img src="http://192.168.1.122/bemediav2/public/img/frontend/tool-add.png" alt=""></a></li>
            </ul>
        </div>
    </div>
</div>

youtube_select id 在这里。它在模态中。当我点击upload_Media时点击了模态

<div class="modal fade modal-vcenter" tabindex="-1" role="dialog" id="upload_Media">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
             <h3>{{ __('sidebar.searchyoutube') }}</h3>
                <a href="#" class="modall-close" data-dismiss="modal"><img src="{{ URL::to('/') }}/img/frontend/close-icon.png" alt=""></a>
            </div>
            <div class="modal-body">
              <div class="row">
                 <div class="col-xs-12">
                     <div class="searchbox_wrapper">
                            {!! Form::open(['method'=>'POST', 'id'=>'youtubesearch']) !!}
                            <div class="search_block">
                                <input type="text" class="form-control" id="search" name="search" placeholder="{{ __('sidebar.searchyoutube') }}">
                                <input type="button" class="post_submit3" onclick="youtubesearch();">
                            </div><!-- search_block-->
                            {!! Form::close() !!}
                        </div>
                        <div class="image_container">
                         <div class="tab_row">
                                <div class="scroll_section scroll_block">
                                    <div class="row">
                                        <div class="image_list">
                                            <ul class="youtube_search"></ul>
                                        </div><!-- image_list-->
                                    </div>
                                </div><!-- scroll_section-->
                                <div class="bottom_shape"></div>
                            </div> <!-- tab_row-->
                        </div><!-- search_block-->
                        <div class="media_bottom">
                            <input type="button" class="submit_select" id="youtube_select" value="{{ __('sidebar.use') }}" data-dismiss="modal">
                            <a href="#" class="cancel_btn2" data-dismiss="modal">{{ __('sidebar.cancel') }}</a>
                        </div><!-- media_bottom-->
                    </div>
              </div>
            </div>
        </div>
    </div>
</div>

我已经从这里选择了我的 youtube 视频

@foreach($youtubes->items as $youtube)
<li class="image_height">
    <input type="radio" name="youtube" value="{{ $youtube->id->videoId }}" id="{{ $loop->iteration }}" />
    <label class="checkbox_common" for="{{ $loop->iteration }}"><img src="{{ $youtube->snippet->thumbnails->default->url }}" alt=""/></label>
    <label class="check_tick"><img src="{{ URL::to('/') }}/img/frontend/check-tick.svg" alt=""/></label>
</li>
@endforeach

我获取视频的控制器是

public function youtubesearch(Request $request) {

        $developer_key = 'myKey';
        $youtubes = [];
        if ($request->get('search')) {
            $format_keyword = implode("+", explode(" ", $request->get('search')));

            $url = "https://www.googleapis.com/youtube/v3/search?q=$format_keyword&order=viewCount&part=snippet&type=video&maxResults=32&key=" . $developer_key;

            $arr_result = json_decode(file_get_contents($url));
            if (isset($arr_result->items) && !empty($arr_result->items)) {
                $youtubes = $arr_result;
            }
        }

        $view = View::make('frontend.include.youtube', compact('youtubes'));
        $html = $view->render();
        $response = array('html' => $html);
        return response()->json($response);
    }

【问题讨论】：

您能否提供带有 html 标记的示例代码以重现该问题？
@KamalaHB 我添加了我的 Html 代码。请看一下
无法找到“youtube_select”ID
我已经更新了我的问题请看一下
现在，输入[name=youtube] 不存在

标签： javascript jquery click focus

【解决方案1】：

你很亲密。简单地改变

jQuery("#textarea").focus();

成为：

document.getElementById('textarea').focus();

【讨论】：

@HabibHassan 你能在#textarea 代码在html 中添加一个sn-p 吗？
好的，我有来自您链接的代码中的made a codepen。如果我只打电话给document.getElementById('textarea').focus(); 而没有你的js 它可以工作。但是我不相信有要点击的youtube_select 元素，这就是为什么onclick function 永远不会被调用的原因。
我已经更新了我的问题。 modal 中有 youtube_select 元素。我已经更新了我的问题。请看一下
经过一番搜索，我看到了youtube_select。然而，它似乎没有渲染任何东西。如果没有渲染任何内容，但随后获得焦点，则似乎什么都没发生。
在这种情况下，我使用中等富文本编辑器。我想这就是为什么这段代码不起作用。

【解决方案2】：

试试这个：

$('#textarea').trigger('click');

【讨论】：

你用jQuery替换$了吗
是的。我替换它
在这种情况下，我使用中等富文本编辑器。我想这就是为什么这段代码不起作用

【解决方案3】：

试试这个

$('#textarea').focus();

【讨论】：

我在 codepen 上测试了它，它运行良好。让我知道这是否解决了您的问题
它不工作。如果我第一次在加载时调用它，它会起作用
在这种情况下，我使用中等富文本编辑器。我想这就是为什么这段代码不起作用

【解决方案4】：

试试这个，一个检查任何选项 textarea 将被聚焦

jQuery("input[name=youtube]").change(function() {
    if(this.checked) {
       jQuery('#textarea').focus();
    }
});

【讨论】：