Wordpress 帖子标题输入字段到文本区域答案

【问题标题】：Wordpress post title input field to text areaWordpress 帖子标题输入字段到文本区域
【发布时间】：2014-11-24 17:29:14
【问题描述】：

我有一个客户在 Wordpress 中添加标题长得离谱的帖子。页面标题太长了，您无法在 Wordpress 编辑器页面中看到整个标题。他们想增加标题输入的大小，但这在使用 CSS 时不起作用，因为文本输入将文本限制为 1 行。我尝试将标题输入更改为 tinyMce 编辑器 (http://wpsnipp.com/index.php/page/add-tinymce-editor-to-postpage-title-input-field/)，但这也不起作用。我真的不想破解核心主题文件，但我唯一能想到的就是将文本输入更改为 textarea 字段。有人有什么想法吗？网站正在运行 WordPress 3.9.3。

【问题讨论】：

您可以使用 JS/CSS 来扩展输入字段，如 textarea。 stackoverflow.com/questions/23818131/…

标签： wordpress admin

【解决方案1】：

您可以使用 jQuery 隐藏输入并在页面加载时附加文本区域。然后在 texarea blure 事件上更新隐藏的标题字段。

类似这样的：

$(document).ready(function(){
    $("#titlewrap input").hide();
    $("#titlewrap").append("<textarea rows='5' cols='60'></textarea>");
    $("#titlewrap").val($("#titlewrap input").val());
    $("#titlewrap").blur(function(){
        $("#titlewrap input").val($("#titlewrap textarea").val());
    });
});

我没有测试代码。这只是为了得到一个想法。

【讨论】：

谢谢大家..这看起来是一个很好的解决方案..但仍然无法让它工作..客户现在改变了主意..感谢您的帮助

【解决方案2】：

你可以设置它的宽度：

<input type="text" id="text" name="text_name" style="width: 300px !important;" />

或者更好地定义一个类：

<input type="text" id="text" name="text_name" class="mytext" />

并在单独的 CSS 文件中应用必要的样式：

.mytext {
    width: 300px !important;
}

如果您想限制用户可以在此文本框中输入的字符数，您可以使用 maxlength 属性：

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

【讨论】：

【解决方案3】：

我使用了一个脚本将输入标题转换为 textarea 字段（允许<br />）。

jQuery(document).ready(function () {
    var regexBr = /<br\s*[\/]?>/gi;
    //Convert input to text area
    if (jQuery("#titlewrap input").val()) {
        jQuery("#titlewrap input").hide();
        jQuery("#titlewrap").append("<textarea rows='5' style='width: 100%'></textarea>");
        let regularTitle = jQuery("#titlewrap input").val().replace(regexBr, "\n");
        jQuery("#titlewrap textarea").val(regularTitle);
        jQuery("#titlewrap textarea").on('change keyup paste', function () {
            let titleWithTags = jQuery("#titlewrap textarea").val().replace(/\n/g, "<br />");
            jQuery("#titlewrap input").val(titleWithTags);
        });
    }
    //Preview index
    jQuery("strong > a").each(function (index, item) {
        item.innerText = item.innerText.replace(regexBr, "\n");
    });
});

【讨论】：