Question

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

Answer 1

您可以使用jQuery隐藏输入并在页面加载时附加textarea。然后在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());
    });
});

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

Answer 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" />

Answer 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");
    });
});

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

3 个答案: