Question

我的应用程序需要一个textarea，用户可以在其中配置一些行为：

切换包裹长行
切换浏览器的拼写检查程序
选择textarea的语言（应用程序将是多语言的，用户将在使用时更改语言）

（请随意评论我的HTML，JS和CSS的风格/效率;我一直在寻求改进）

我正在尝试利用HTML5功能。

通过操纵textarea中的jQuery属性/属性切换包装和拼写检查（.prop('wrap', 'off')和.attr('spellcheck','false')在Firefox 27.0中完美运行，但似乎无法正常工作对于Opera 19和IE 10（我没有其他浏览器/平台可用于检查其他排列）。

包装

我搜索了解决方案并看到过有关在css和white-space之间操纵normal nowrap的相关建议，但这似乎会丢失换行符并将其关闭回来并不会让你回到你的开始。

尽管.prop('wrap','off')在FF 27中有效，但它在Opera 18和IE 10中似乎没有任何效果。

我已经阅读了关于wrap非标准的讨论，如果有的话，我会很高兴只有css解决方案。有什么建议吗？

拼写检查

与包装类似，FF 27按预期响应.attr('spellcheck', 'true')（ NB 字符串不是布尔值）但不完全与Opera 19和IE 10一致.IE 10离开红色波浪形下划线并且一次spellcheck已设置为false，在将其更改回“true”后，它不会再费力地重新检查。 Opera 19似乎没有引起任何注意。

是否可以有选择地启用/禁用拼写检查？根据MDN developer.mozilla.org/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms

语言选择

我这里有两个问题（到目前为止......）。首先，我不确定它是.prop还是.attr，因为我似乎无法做任何工作。它是什么，我如何使它工作？

其次，我未能找到一个详尽而明智的语言区域对列表。我见过很多文件讨论/定义格式和无穷无尽的缩略语（BCP47，IETF，i18n，ISO 639，ISO 15924，ISO 3166-1，LCID和UN M.49 ......）。我可以找到可以检查当前是否注册了组合的工具。我可以找到ISO-639-2（和-3）语言代码和ISO 3166-1 alpha-2国家代码的列表。然而，我找不到语言 - 国家/地区对的列表。我确实找到了这个旧的Microsoft代码的msdn.microsoft.com/en-us/library/ms533052%28v=vs.85%29.aspx列表，但我不确定它是否合适。如果我今天学到了一件事，那就是有很多与语言和国家代码相关的标准......

有人知道现有的清单吗？它不一定非常完美，我很乐意从表中提取内容并将其操作为正确的lang-country格式。

HTML：

<div class="ui-layout-center">Everything in this fiddle will be contained within a pane (jQuery UI Layout plugin, layout.jquery-dev.net) which overrides some of the CSS</div>
<div id="pane-west" class="ui-layout-west no-scrollbar" style="height:100%">
    <div id="jqui-tab">
        <ul>
            <li><a href="#tab1">Tab 1</a>

            </li>
            <li><a href="#tab2">Tab 2</a>

            </li>
        </ul>
        <div id="tab1">Some content
            <div class="vexpand borderbox">
                <form> <span title="(de)activate line wrapping"><input name="ta-controls" id="cb-wrap" type="checkbox" value="wrap" checked="checked" /><label for="cb-wrap">wrap long lines</label></span>
 <span class="spacer" title="(de)activate spell checking"><input name="ta-controls" id="cb-spell" type="checkbox" value="check" checked="checked" /><label for="cb-spell">check spelling</label></span>
 <span class="spacer" title="set the language / region"><select name="ta-controls" id="sl-lang">

     <optgroup label="English"><option value="en">English</option> 
  <option value="en-us" selected>English (United States)</option>
                <option value="en-gb">English (United Kingdom)</option></optgroup>
     <optgroup label="French"><option value="fr">French</option><option value="fr-ca">French (Canada)</option></optgroup>
     </select></span>

                </form>
                <textarea id="txtarea" class="borderbox" autocorrect="off" autocapitalize="off">Analyse this then analyze that. C'est magnifique n'est pas? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus viverra velit vitae sollicitudin. Ut at eleifend mi. Pellentesque non posuere ipsum. Nullam fermentum purus mauris, sed vestibulum enim venenatis eu. Integer sit amet vestibulum nisl, iaculis hendrerit metus. Nullam lacinia pretium aliquam. Donec non euismod libero. Nam ac leo in est vestibulum dignissim malesuada id elit. Praesent tempus malesuada luctus. Nunc posuere elementum lectus, quis malesuada eros varius ac. Proin consequat risus tincidunt massa convallis fermentum. In hac habitasse platea dictumst. Sed eget pellentesque ante.</textarea>
            </div>
        </div>
        <div id="tab2">This tab's content are unrelated</div>
    </div>
</div>

CSS：

body, html {
    height:100%;
    margin: 0;
    padding: 0;
}
.ui-layout-center {
    background:#eee
}
.ui-tabs-panel {
    padding:0!important
}
.no-scrollbar {
    overflow:hidden;
}
.spacer {
    margin-left:1.5em;
}
.borderbox {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
textarea {
    /* the full jQuery UI Layout css will override some of these */
    resize: vertical;
    width: 100%;
    height: 95%;
    height: calc(100% - 22px);
    margin:0
}
.vexpand {
    /* the full jQuery UI Layout css will override some of these */
    margin-left:0.2em;
    position: absolute;
    bottom: 30px;
    width: 95%;
    width: calc(100% - 1em);
    height: 98%;
    height: calc(100% - 100px);
    border:1px solid blue;
}

JS：

var ta = $('#txtarea'),
    layout = $('body').layout({
        west__resizable: false,
        west__size: 0.95
    });
$('#cb-spell').on('change', function (e) {
    if ($(this).is(':checked')) {
        ta.attr('spellcheck', 'true')
    } else {
        ta.attr('spellcheck', 'false')
    }
    //ta.val(ta.val()) // attempt at adding / removing the red under-squiggles in IE 10 and Opera 19
}).prop('checked', true).trigger('change');

$('#cb-wrap').on('change', function (e) {
    if ($(this).is(':checked')) {
        ta.css('white-space', 'normal')
        ta.prop('wrap', 'on')
    } else {
        ta.css('white-space', 'nowrap')
        ta.prop('wrap', 'off')
    }
});

$('#sl-lang').on('change', function (e) {
    //ta.attr('lang', $(this).val()) // is lang an attribute?
    ta.prop('lang', $(this).val()) // or a property?
    .focus() // refreshes the textarea, hopefully
}).trigger('change'); // set the default

$('#jqui-tab').tabs({
    heightStyle: 'fill',
    show: 'fade',
    hide: 'fade'
});

跨浏览器textarea属性（属性？）spellcheck，lang和wrap

0 个答案: